麻煩引出配線

Question

（退房Fiddle爲完整源）

我具有由地圖繪製線條的問題：使用d3.js {節點node} 。

問題的代碼塊如下：

svg.append("path") 
    .data(connections) 
    .enter() 
    .append("line") 
    .attr("x1", function(d) { 
     console.log(d.source.age); 
     return d[0].age * 8 + 5; }) 
    .attr("y1", function(d) { return d[0].height; }) 
    .attr("x2", function(d) { return d[1].age * 8 + 5; }) 
    .attr("y2", function(d) { return d[1].height; }) 
    .attr("stroke", "black"); 

我試圖通過管路與節點連接到自己的孩子。 json數據顯示在小提琴中。

我明顯對.functions的排序有一些問題。擁有一點js經驗並沒有幫助。

另外，我有一個問題與數據推到我的對象在此塊：

for(var source in people){ 
    source.height = Math.random() * 400 + 5; 
    source.width = source.age * 8 + 5; 
    for(var i in source.children){ 
     connections.push({source : people[i]}); 
    } 
} 

source.width和source.height是不確定的。

任何理由設置，這裏的領域是不行的，但下面的功能：

var circle = svg.selectAll("circle") 
    .data(people) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
     return d.age * 8 + 5; 
    }) 
    .attr("cy", function(d) { 
     d.height = Math.random() * 400 + 5; //THIS!!! 
     return d.height; 
    }) 
    .attr("r", 5); 

我通過

How to draw a *simple* line segment with d3.js?

http://bl.ocks.org/mbostock/1153292

看了，但轉化爲我的特定的json數據和用法並不簡單。

Answer 1

你實際上比你想象的更接近 - 幾乎有效的代碼在那裏，只是註釋掉了！您正在使用的var i in foo語法在Javascript中不起作用。要遍歷數組，您必須使用舊式循環或.forEach()。工作代碼看起來像這樣。

var connections = []; 
for(var i = 0; i < people.length; i++) { 
    var numChildren = people[i].children.length; 
    var children = people[i].children; 
    for(var j = 0; j < numChildren; j++) { 
    connections.push({ 
     source : people[i], 
     target : people[children[j]] 
    }); 
    } 
} 

除了固定的變量名，我已經改變的唯一的事情就是用children[j]的一個索引people，而不是本身的價值。在其餘代碼中，只有一個錯字：而不是svg.append("path").data(connections)，您需要svg.selectAll("line").data(connections)，符合通常的D3數據綁定模式。

完整演示here。