d3.js

Put text in the middle of a circle using. d3.js

由 拟墨画扇 提交于 2021-02-05 12:17:40
问题 I have this piece of code in which circles are drawn, I need to put a text inside each circle, I would also like to know how I can put a certain size to each of the elements of the circle. Thank you very much. svg = d3.select(selector) .append('svg') .attr('width', width) .attr('height', height); // Bind nodes data to what will become DOM elements to represent them. bubbles = svg.selectAll('.bubble') .data(nodes, function (d) { return d.id; }); // Create new circle elements each with class

d3 customize tick line (based on nextSibling)

由 冷暖自知 提交于 2021-02-05 11:13:45
问题 I have gaps in my data (on the y-axis), so even though I'd rather use a linear scale, I have to go with an Ordinal scale — so that the holes are not seen. However, I do want to visually show that the data was not continuous using a different tick marker. The idea here is to check if the next value - current value is 1, and if not draw a different tick line. Using this example I used this.parentNode.nextSibling — but it's not getting the required value. How can I go about doing this? Sample

如何使用JavaScript创建气泡图以可视化选举结果

由 谁说我不能喝 提交于 2021-02-05 09:25:55
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。 在当今数据呈指数增长的时代，可视化是工具箱中必不可少的技能。流行的技术包括条形图，折线图，饼图和气泡图等。 对于任何开发人员，尤其是刚起步的开发人员，使用JavaScript从头开始构建交互式图表可能都是一项艰巨的工作。这就是为什么我们拥有JS图表库的原因，该库使您可以更轻松，更快捷地创建有见地的可视化效果！ 继续阅读以了解如何使用这些库之一创建JavaScript气泡图。 JavaScript图表库 有很多很棒的JavaScript库可供使用，并且每个库都有自己的优缺点。但是最好的部分是，使用所有图表构建图表的过程几乎是相似的。因此，您可以与任何人一起学习绳索，然后使用适合您特定项目要求的任何库。 我决定与本教程一起使用AnyChart JavaScript库创建气泡图。我认为对于初学者到中级编码技能的开发人员来说，这是一个不错的选择。AnyChart具有丰富的文档资料，非常灵活，并且具有多种图表类型，可以启动您的可视化之旅。 什么是气泡图，它将显示什么？ 我知道您很高兴开始创建可视化文件，但是在我们开始之前

Default SVG position in d3.js

由 六眼飞鱼酱① 提交于 2021-02-05 09:15:06
问题 I would like to understand why is my SVG positioned outside the SVG container element and not at the x:0/y0 coordinates by default ? CSS: Minimal (no CSS in case, only removed margin/padding on document body) Javascript: var svg = d3.select('div#map').append('svg:svg'); svg.append('svg:g') .append('svg:text') .text('Hello word') //.attr('x', 0) //.attr('y', 0) .attr('fill', 'red'); HTML: <div class="map" id="map"></div> The text element is there, filled with red and visible but is overflowing

How can I scale my map to fit my svg size with d3 and geojson path data

由 烂漫一生 提交于 2021-02-05 09:11:43
问题 I am trying to create a d3 SVG that draws a map of New York State and scale it so that it fits the size of my SVG, the issue I am having is that when I use .fitSize([height, width], mapObject) it only returns a NaN error in the console. the topoJSON file of NYS I am using I am able to get the map to display without scaling but of course, it is not optimized and needs to be scaled I have attempted what is said in this post but I have not figured out the correct solution var map = d3.json('./ny

Updating the table multiple times using D3 does not work

由 霸气de小男生 提交于 2021-02-05 08:51:20
问题 I have a page that need to load a new data and update it to an existing table element using d3. I am writing the following but didn't work: // completeTableData = [ {head1:va1, head2: val2}, {haed1: val4, head2: val5}, ... ] var tr = d3.select("tbody") .selectAll("tr") .data(completeTableData); tr.exit().remove(); // remove the previous data in the table tr.merge(tr.enter().append("tr")); var td = tr.selectAll("td") td.data(function(d, i) { return Object.values(d); }); td.exit().remove(); td

extend x and y axis length in scatterplot, d3js

由 情到浓时终转凉″ 提交于 2021-02-05 07:09:52
问题 I am trying to extend the x and y axis length and add the arrow at the end. Here is my code and plunker. I need x axis to extend beyond 4.6 and y-axis beyond "AS" and add an arrow at the end. Kindly help. https://plnkr.co/edit/tA6oyKQCCmhNadbARR89?p=preview var margin = {top: 20, right: 20, bottom: 20, left: 40}, width = 420 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.ordinal().rangePoints([height, 0])

extend x and y axis length in scatterplot, d3js

由 北战南征 提交于 2021-02-05 07:09:35
问题 I am trying to extend the x and y axis length and add the arrow at the end. Here is my code and plunker. I need x axis to extend beyond 4.6 and y-axis beyond "AS" and add an arrow at the end. Kindly help. https://plnkr.co/edit/tA6oyKQCCmhNadbARR89?p=preview var margin = {top: 20, right: 20, bottom: 20, left: 40}, width = 420 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.ordinal().rangePoints([height, 0])

extend x and y axis length in scatterplot, d3js

由 我与影子孤独终老i 提交于 2021-02-05 07:09:29
问题 I am trying to extend the x and y axis length and add the arrow at the end. Here is my code and plunker. I need x axis to extend beyond 4.6 and y-axis beyond "AS" and add an arrow at the end. Kindly help. https://plnkr.co/edit/tA6oyKQCCmhNadbARR89?p=preview var margin = {top: 20, right: 20, bottom: 20, left: 40}, width = 420 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.ordinal().rangePoints([height, 0])

extend x and y axis length in scatterplot, d3js

由 筅森魡賤 提交于 2021-02-05 07:09:25
问题 I am trying to extend the x and y axis length and add the arrow at the end. Here is my code and plunker. I need x axis to extend beyond 4.6 and y-axis beyond "AS" and add an arrow at the end. Kindly help. https://plnkr.co/edit/tA6oyKQCCmhNadbARR89?p=preview var margin = {top: 20, right: 20, bottom: 20, left: 40}, width = 420 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.ordinal().rangePoints([height, 0])
订阅 d3.js