Impossibile leggere il valore del percorso d dal file json d3?

Question

Sto leggendo le informazioni di un arco dal file json e visualizzandole tramite d3. Attualmente sto usando d3.layout per raggruppare i dati. così devo leggere questo file dove tag è il nostro tag svg che è path e il value è il valore di percorso d, Il problema è il valore d verrà modificato dopo aver letto e restituito 0. Come leggo lo value? Devo organizzare il mio file JSON in modo diverso? Ecco il mio codice:

Il file JSON:

 {"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" } 

    ] 

} 

]} 

Questo è il mio codice sorgente:

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)"); 

    }); 

Quando ho controllato la console mi aspettavo "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" ma è tornare 0, Come posso occupatene?

Answer 1

Prima di tutto non sono abbastanza sicuro che il tuo d3.select("#body") debba essere un d3.select("body")? O hai un elemento con ID body?

Il problema con il ripristino dello value su 0 è che il d3.layout.partition() utilizza il campo del valore. Si potrebbe rinominare il campo del valore per qualcos'altro come path e impostarlo con

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

Un altro problema con il codice è, che si aggiungono diversi elementi SVG. Se davvero si vuole solo leggere i percorsi cerchio e visualizzarle, quindi questo codice fa il lavoro:

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)"); 
}); 

Non c'è bisogno per il layout della partizione. Basta creare elementi di percorso e aggiungere il percorso da JSON. Se vuoi mostrare i cerchi, sarebbe meglio metterli al di fuori dei pathelements nel tuo json, perché non puoi aggiungere cerchi svg all'interno degli elementi del percorso.