Javascript 从d3.js+中的数据绘制线条时出现问题；数据操纵

（查看获取完整的源代码）

我在使用d3.js从地图{node: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数据显示在Fiddle中

我显然对.函数的顺序有一些问题。没有什么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);

我仔细看了看

---

但是转换到我特定的json数据和用法并不简单。

你实际上比你想象的更接近——几乎可以工作的代码就在那里，只是注释掉了！您使用的foo中的

vari

语法与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]]
    });
  }
}

var连接=[]；
for（var i=0；i

除了修复变量名之外，我唯一改变的是使用

children[j]

作为

people

的索引，而不是值本身。在代码的其余部分中，只有一个输入错误：与通常的D3数据绑定模式一致，您需要的不是

svg.append（“path”）.data（connections）

，而是

svg.selectAll（“line”）.data（connections）

---

完成演示。

谢谢你，拉尔斯！这真的很有帮助和启发。