d3.js

问题 I am trying to create a D3 sunburst chart based on this example: https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099 I'd like the arcs created to close the full circle but they don't. For testing purpose and simplicity, the sum of every element's size in the the same depth equals 360. Follows my jsFiddle: https://jsfiddle.net/igasparetto/uz8rz13d/ Something is telling me the problem is on these lines: var partition = d3.partition(); var arc = d3.arc() .startAngle(function(d) {

问题 I am trying to mimic a visual that depicts multiple relationships by time period, like this (time period = generation): However, my efforts have not panned out thus far; I'm still getting blank output in the browser. Hard coded data and code in the snippet: var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg')

问题 I am trying to mimic a visual that depicts multiple relationships by time period, like this (time period = generation): However, my efforts have not panned out thus far; I'm still getting blank output in the browser. Hard coded data and code in the snippet: var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg')

问题 I am trying to mimic a visual that depicts multiple relationships by time period, like this (time period = generation): However, my efforts have not panned out thus far; I'm still getting blank output in the browser. Hard coded data and code in the snippet: var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg')

问题 I am trying to mimic a visual that depicts multiple relationships by time period, like this (time period = generation): However, my efforts have not panned out thus far; I'm still getting blank output in the browser. Hard coded data and code in the snippet: var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg')

问题 this is my next question to enhance original question. So what I am trying is to animate triangle mark and text tooltip along the filling path. var chart = d3.select("#speedometer"); const arc = d3 .arc() .outerRadius(120) .innerRadius(90) .startAngle(-Math.PI / 2); chart .append("path") .datum({ endAngle: Math.PI / 2 }) .attr("transform", "translate(160, 180)") .attr("class", "background") .style("fill", "#495270") .attr("d", arc); const mainGroup = chart.append('g') .datum({ endAngle: -Math

问题 this is my next question to enhance original question. So what I am trying is to animate triangle mark and text tooltip along the filling path. var chart = d3.select("#speedometer"); const arc = d3 .arc() .outerRadius(120) .innerRadius(90) .startAngle(-Math.PI / 2); chart .append("path") .datum({ endAngle: Math.PI / 2 }) .attr("transform", "translate(160, 180)") .attr("class", "background") .style("fill", "#495270") .attr("d", arc); const mainGroup = chart.append('g') .datum({ endAngle: -Math

问题 Is there a method for getting the client rect for an element relative to the document besides offset? getBoundingClientRect() gets the value relative to the client's browser. I'm using D3 and jQuery's height() nor width() are working (I've even tried doing it window.load() ), but offset() is. Neither are javascripts .offset return [$e.offset().top + $e.height()/2, $e.offset().left + $e.width()/2] $e.height() and $e.width() both return 0 It's an SVG element, I'm just using it to edit my SVG .

问题 Is there a method for getting the client rect for an element relative to the document besides offset? getBoundingClientRect() gets the value relative to the client's browser. I'm using D3 and jQuery's height() nor width() are working (I've even tried doing it window.load() ), but offset() is. Neither are javascripts .offset return [$e.offset().top + $e.height()/2, $e.offset().left + $e.width()/2] $e.height() and $e.width() both return 0 It's an SVG element, I'm just using it to edit my SVG .

问题 I cant use the .centroid() method because its returns [NaN,Nan]. I dont know what is the right data format. var pathh = d3.geo.path(); d3.selectAll("path.line") .each(function (d, i) { var centroid = pathh.centroid(d); console.log('Centroid at: ', d,+ centroid[0] + ', ' + centroid[1]); }); My data format is: One object is one point(vertex) of the polygon 0: Object area_id: "IVP001" vertex_id: "37451" x: "100" y: "100" 1: Object area_id: "IVP001" vertex_id: "37452" x: "150" y: "120" 2: Object