sunburst-diagram

How can I use CSV data in a zoomable sunburst chart?

由 ↘锁芯ラ 提交于 2019-12-11 10:34:09
问题 I have sunburst visualization which basically has the same code structure as the one in this CodePen (that comes from this question on stackoverflow. I have tried to also include the possiblity to not only zoom-in, but also zoom-back within the sunburst (when clicking into the middle of the sunburst). I have tried the following steps, but none of these have worked so far and I am lost in how to do that (apologies if this is a very easy thing to do, I am very new to JS). Include at the

Hide label if not enough space D3 Zoomable Sunburst chart

由 那年仲夏 提交于 2019-12-10 15:43:14
问题 So I know this answer is here to hide text that will not fit in the chart: D3 put arc labels in a Pie Chart if there is enough space But I can't figure out how to introduce this into the code below. I've edited this code to make it so you only see uptil the second inner circle when viewing. But even then, lots of labels do not have enough space to fit in their respective slice. So I'd like to add more logic, just to check if the text can fit. Or something even simpler would be if the slice

Capturing/Saving the current state of d3.js Sunburst Chart

由 独自空忆成欢 提交于 2019-12-10 12:12:30
问题 I am a newbie to d3.js . I am working in d3.js zoomable sunburst chart http://bl.ocks.org/mbostock/4348373. When the user zoom into a particular arc and I need to capture this state of the sunburst diagram . When the user comes back to the sunburst diagram or load the graph again he should see the state where he left. Note : I dont want to serialise the svg elements to show the state of the sunburst. If i serialise it then the chart will be static and user cant click on the sunburst and

Export or Download d3.js sunburst / collapsible tree charts as pdf file

由 不问归期 提交于 2019-12-10 11:07:03
问题 I need to download my d3.js collapsible tree chart and sunburst chart as PDF file . I tried using jspdf.plugin.svgToPdf plugin but it doesnt work. Could someone guide me in downloading the charts as pdf ? My source code for collapsible tree (function () { var out$ = typeof exports != 'undefined' && exports || this; var margin = { top : 20, right : 120, bottom : 20, left : 120 }, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom; var i = 0, duration = 750,

Drawing a sector of sunburst diagram using d3.js

由 荒凉一梦 提交于 2019-12-08 15:20:51
I need to draw a sunburst diagram like this: As you can see , this is actually a sector of sunburst diagram. Can I set a startAngle and endAngle for the main circle/arc? Edit: My diagram is like: https://bl.ocks.org/mbostock/4063423 Is this what you are looking for ? Here is the changing part : var partition = d3.layout.partition() .sort(null) .size([Math.PI, radius * radius]) // Previoulsy : .size([2 * Math.PI, radius * radius]) .value(function(d) { return 1; }); var arc = d3.svg.arc() .startAngle(function(d) { return d.x - Math.PI / 2; }) // Previously : .startAngle(function(d) { return d.x;

D3 text on mouseover

由 元气小坏坏 提交于 2019-12-08 07:26:44
问题 I'm working on a sunburst diagram in D3 and I can't figure out how to add the text on mouseover. The text works if I add it 'statically' to the page, but if I move the code that add the text and put it in a 'mouseOver' function, no text shows up. Why? (in the following snippet you find both the working and the non-working codeblocks. Thanks AC <!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative;

Drawing a sector of sunburst diagram using d3.js

由 风流意气都作罢 提交于 2019-12-08 07:12:49
问题 I need to draw a sunburst diagram like this: As you can see , this is actually a sector of sunburst diagram. Can I set a startAngle and endAngle for the main circle/arc? Edit: My diagram is like: https://bl.ocks.org/mbostock/4063423 回答1: Is this what you are looking for ? Here is the changing part : var partition = d3.layout.partition() .sort(null) .size([Math.PI, radius * radius]) // Previoulsy : .size([2 * Math.PI, radius * radius]) .value(function(d) { return 1; }); var arc = d3.svg.arc()

Changing labels of json for d3 sunburst diagram

由 自作多情 提交于 2019-12-08 06:40:56
问题 I am trying to use this code from sunburst diagram to work for my data. Originally my data is from csv which I have converted to json with the help of d3.nest() d3.csv("chord.csv", function(error,csv_data){ var sunData1 = {"key": "KINGDOM", "values": d3.nest() .key(function(d) { return d.KINGDOM; }) .key(function(d) { return d.PHYLUM; }) .key(function(d) { return d.CCLASS; }) .key(function(d) { return d.ORDER; }) .key(function(d) { return d.FAMILY; }) .key(function(d) { return d.GENUS; })

D3 Sequences Sunburst Animation

由 拈花ヽ惹草 提交于 2019-12-07 22:55:15
问题 I'm new to D3 and am trying to upgrade Kerryrodden's sequences sunburst with zooming and animation: I've added the zooming opportunity with the onclick event and fully redraw the paths: function click(d) { d3.select("#container").selectAll("path").remove(); var nodes = partition.nodes(d) .filter(function(d) { return (d.dx > 0.005); // 0.005 radians = 0.29 degrees }) ; var path = vis.data([d]).selectAll("path") .data(nodes) .enter().append("svg:path") .attr("display", function(d) { return d

In sequences sunburst, how to give a child the same color of parent?

由 狂风中的少年 提交于 2019-12-07 15:58:54
问题 What to do to give a child the same colour of parent but lighter, I used the following to generate colour var color = d3.scale.category20b(); .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) this code gives a random colour for each node. first image : random colour the next image is what I need, my code produce it randomly. Gradient colour I want to make the colour of child is lighter than the colour of parent. Sorry, I put my result images as a link because I
订阅 sunburst-diagram