Failed to read d path value from json d3 file?

Question

I read Arc information from a json file and visualize them with d3. In fact, I am using d3.layout to group data. so I have to read this file, where tag is our svg tag, which is path , and value is the d value of the path. Problem: The value of d will change after reading and returning 0 . How to read value ? Should I organize my json file differently? Here is my code:

Json file:

  {"id": "svgContent","children": [ {"id": "circle1","tag": "path", "value": "M0,160A160,160 0 1,1 0,-160A160,160 0 1,1 0,160M0,100A100,100 0 1,0 0,-100A100,100 0 1,0 0,100Z", "children": [ { "id": "point", "cx": "-67.59530401363443", "cy": "-93.03695435311894" }, { "id": "point", "cx": "-109.37149937394265", "cy": "35.53695435311897" }, { "id": "point", "cx": "1.4083438190194563e-14", "cy": "115" } ] }, {"id": "circle2","tag": "path","value": "M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z", "children": [ { "id": "point", "cx": "-126.37382924288177", "cy": "-173.93865379061367" }, { "id": "point", "cx": "-204.477151003458", "cy": "66.43865379061373" }, { "id": "point", "cx": "2.6329906181668095e-14", "cy": "215" } ] } ]} 

This is my source code:

  var w = 1200, h = 780; var svgContainer = d3.select("#body").append("svg") .attr("width", w).attr("height", h).attr("id", "svgContent"); var pack = d3.layout.partition(); d3.json("/data.json", function(error, root) { if (error) return console.error(error); var nodes = pack.nodes(root); svgContainer.selectAll("pack").data(nodes).enter().append("svg") .attr("id", function (d) { return d.id; }).append("path") .attr("d", function (d) { console.log(d.value); return d.value; }) .attr("transform", "translate(600,0)"); }); 

When I checked the console I was expecting "M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z" but returned 0 , how can I handle it?

Answer 1

First of all, I'm not quite sure if your d3.select("#body") be d3.select("body") ? Or do you have an element with id body ?

The problem with restarting value to 0 is that d3.layout.partition() uses a value field. You can rename your value field to something like path and set it with

 .attr("d", function(d){ return d.path; }) 

Another problem with your code is that you are adding multiple svg elements. If you really just want to read the circular paths and display them, then this code does the job:

 var w = 1200, h = 780; var svgContainer = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) .attr("id", "svgContent"); d3.json("/data.json", function(error, root) { if (error) return console.error(error); svgContainer.selectAll("path") .data(root.children) .enter() .append("path") .attr("id", function (d) { return d.id; }) .attr("d", function(d) { return d.value}) .attr("transform", "translate(260,260)"); }); 

No need for section layout. Just create path elements and add the path from json. If you want to show circles, it would be better to place them outside the palettes in your json, because you cannot add SVG circles inside path elements.