Nie można odczytać wartości ścieżki d z pliku json d3?

Question

Czytam informacje o łuku z pliku json i wizualizuję je za pomocą d3. Aktualnie używam d3.layout do grupowania danych. więc muszę przeczytać ten plik, gdzie tag jest naszym svg tagiem, który jest path i value jest wartością ścieżki d, Problemem jest wartość d zostanie zmieniona po przeczytaniu i zwrocie 0. Jak mogę przeczytać value? Czy powinienem inaczej organizować plik json? Oto mój kod:

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

    ] 

} 

]} 

To jest mój kod źródłowy:

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

    }); 

Po sprawdzeniu konsolę spodziewałem "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" ale powrót 0 Jak mogę zajmij się tym?

Answer 1

Po pierwsze, nie jestem do końca pewien, czy Twój d3.select("#body") powinien być ? A może masz element o identyfikatorze body?

Problem z ponownym ustawieniem value na 0 polega na tym, że d3.layout.partition() używa pola wartości. Można zmienić nazwę pole wartości do czegoś innego jak path i ustawić ją z

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

Innym problemem z kodem jest, że dodasz kilka elementów SVG. Jeśli naprawdę chcą czytać ścieżki koło i wyświetlać je, a następnie kod ten spełnia swoje zadanie:

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

Nie potrzeba układ partycji. Po prostu utwórz elementy ścieżki i dodaj ścieżkę z json. Jeśli chcesz pokazać kręgi, lepiej umieścić je poza klockami w twoim jsonie, ponieważ nie możesz dodawać kręgów svg wewnątrz elementów ścieżki.