Question

（查看完整来源的 Fiddle ）

我在使用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数据显示在小提琴中。

我明显对.functions的排序有一些问题。拥有少量的经验并没有帮助。

此外，我遇到了将数据推送到此块中的对象的问题：

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。

无法在d3.js +数据操作中从数据中绘制线条

1 个答案: