2016-07-18 36 views
8

Bazı d3 kodunu v3'ten sürüm 4'e güncellemeye çalışıyorum. JSON verilerini kullanarak bir ağaç diyagramım var. D3.v4 örnekleri, tablo verilerini (ör. Flare.csv) stratify() https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04 kullanarak hiyerarşik verilere nasıl dönüştürüleceğini gösterir. Ama verilerim JSON, bu yüzden stratify() 'ye ihtiyacım yok ya da ihtiyacım yok. Bu kodu çalıştırmadand3.v4'te JSON verilerini kullanarak ağaç düzeni nasıl oluşturabilirim? Stratify()

undefined is not a function (evaluating 'root.eachBefore')

: bu hatayı alıyorum

var height = 200; 
var width = 500; 

var xNudge = 50; 
var yNudge = 20; 

var tree = d3.tree() 
    .size([height, width]); 

var svg = d3.select("body").append("svg").attr("width","100%").attr("height","100%"); 
var chartGroup = svg.append("g").attr("transform","translate(50,200) rotate(-90)"); 

d3.json("treeData.json", function(treeData) { 


    var root = treeData[0]; 
    tree(root); 
    console.log('hello');//doesn't log to console, i.e. error occurs beforehand 
} 

treeData.json:

[ 
    { 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
    { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
     { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
     }, 
     { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
     } 
     ] 
    }, 
    { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
    } 
    ] 
} 
] 

o tabakalandırmak kullanmadan d3.v4 bir ağaç düzen oluşturmak için aslında mümkün mü Yani, zaten hiyerarşik olan verileri kullanarak? Bir örnek biliyor mu, yoksa kodumdaki sorunu tespit edebilir mi? teşekkürler

cevap

5

Verilerinizi ağaç üzerinde hazır hale getirmek için d3.hierarchy dosyasını çalıştırmanız gerekir(). Stratify, muhtemelen hiyerarşiyi çalıştırır veya bir şekilde benzerdir. Bu yüzden uygun satırı şu şekilde değiştirin: var root = d3.hierarchy (treeData [0]);

+0

) (d3.hierarchy tarafından döndürülen nesne içermez Artık "isim" ve "kimlik" özellikleri. – jackOfAll

6

Aynı problem vardı. Emma's response aslında cevapladı, ancak hala düzgün çalışması için sorun yaşadım. Herkesin yararlı bulabileceği durumlarda biraz detaylandırırım. Yukarıdaki örnek verilere göre Emma's response ve this bloğuna dayanan işlevsel sonucu here gösteren bir blok oluşturdum.

  • Sen JSON nesnesi Dizisi parantez sarılı adres:

    cevap üç parçadır. Bu köşeli ayraçları (gistte yaptığım gibi) kaldırın ya da TreeData'nızın sonuna (yukarıdaki Emma bağlantıda olduğu gibi) bir [0] yerleştirin.

  • JSON nesnesini d3.hierarchy'a iletin (Emma'nın açıkladığı gibi). Son olarak, API, yukarıda bağlı olan bloğumda da ele alınan düğümlerin adlandırılması için değiştirilmiş gibi görünmektedir. kolaylık sağlamak için

, burada the block I made gelen kod:

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    g = svg.append("g").attr("transform", "translate(60,0)"); 

var tree = d3.cluster() 
    .size([height, width - 160]); 

var stratify = d3.stratify() 
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); 

d3.json("treeData.json", function(error, treeData) { 
    if (error) throw error; 

    var root = d3.hierarchy(treeData); 
    tree(root); 

    var link = g.selectAll(".link") 
     .data(root.descendants().slice(1)) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     return "M" + d.y + "," + d.x 
      + "C" + (d.parent.y + 100) + "," + d.x 
      + " " + (d.parent.y + 100) + "," + d.parent.x 
      + " " + d.parent.y + "," + d.parent.x; 
     }); 

    var node = g.selectAll(".node") 
     .data(root.descendants()) 
    .enter().append("g") 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
     .attr("transform", function(d) { 
     return "translate(" + d.y + "," + d.x + ")"; 
     }) 

    node.append("circle") 
     .attr("r", 2.5); 

    node.append("text") 
     .attr("dy", 3) 
     .attr("x", function(d) { return d.children ? -8 : 8; }) 
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
     .text(function(d) { 
     return d.data.name; 
     }); 
}); 

burada dizi çıkarıldı treeData.json verilmiştir:

{ 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
    { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
     { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
     }, 
     { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
     } 
     ] 
    }, 
    { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
    } 
    ] 
} 
+0

d3.hierarchy() tarafından döndürülen nesne artık "ad" ve "id" özelliklerini içermiyor. – jackOfAll

+0

Bunu denediğimde d işlevlerindeki geri aramalar tanımlanmamış. Ne olması gerekiyordu? –

İlgili konular