D3 json dosyasından path d değeri okunamadı mı?

Question

Json dosyasından bir Arc bilgisi okuyorum ve d3 kullanarak bunları görselleştiriyorum. Aslında veri gruplamak için d3.layout kullanıyorum. Bu yüzden bu dosyayı okumak için tag 012617383866483934021251010 (path) ve value (value) yolunun d yolunu okuyoruz. Sorun, d değerinin okunup 0 döndüğünden sonra değiştirileceğidir. value'u nasıl okurum? Json dosyamı farklı şekilde düzenlemeli miyim? İşte benim kodudur:

json dosyası: Ben

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

    }); 

ben "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" beklenen konsolu kontrol ama 0 dönmek var, nasıl olabilir: Bu benim kaynak kodu

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

    ] 

} 

]} 

olduğunu halledebilir misin?

Answer 1

Öncelikle d3.select("#body")'un d3.select("body") olması gerekip gerekmediğinden emin değilim? Veya body numaralı bir öğeniz var mı?

value'un 0'a yeniden boyutlandırılmasıyla ilgili sorun, d3.layout.partition()'un değer alanını kullanmasıdır. Sen path gibi başka bir şey için değer alanını yeniden adlandırmak ve birkaç svg elemanları eklemek,

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

sizin koduyla başka sorun ise bunu ayarlayabilirsiniz. Eğer gerçekten sadece onları çember yolları okumak ve görüntülemek isterseniz, o zaman bu kod işi yapar: bölüm düzeni için

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

gerek yok. Sadece yol öğeleri oluşturun ve jsondan yol ekleyin. Çevreleri göstermek istiyorsanız, bunları jsonunuzdaki yolların dışına yerleştirmek daha iyi olurdu, çünkü yol öğelerinin içine svg çevreleri ekleyemezsiniz.