Couldn't read path d value from d3 json file?

Question

I am reading an Arc information from json file and visualizing them using d3. Actually I am using d3.layout to grouping data. so I have to read this file where tag is our svg tag that is path and the value is the d value of path ,The problem is d value will be changed after reading and return 0 . How do I read the value? Should I organize my json file differently? Here is my code :

The 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 expected "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 it's return 0 ,How can I handle it?

Answer 1

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

The problem with reseting the value to 0 is, that the d3.layout.partition() uses the value field. You could rename your value field to something else like pathand set it with

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

Another problem with your code is, that you add several svg elements. If you really just want to read the circle 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 the partition layout. Just create path elements and add the path from the json. If you want to show the circles, it would be better to place them outside of the pathelements in your json, because you can't add svg circles inside of path elements.