Question

我的D3.js应用程序中的单独g元素中包含5个不同的圆圈 - 它们是水平布局的（所有这些都具有相同的y位置）

var vis = d3.select("body).append("svg:svg")

var node = vis.selectAll("g.node")
       .data(nodes);

var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d,i){
         return "translate(" + (i * 200) + ",0)";
      });

nodeEnter.append("svg:circle")
      .attr("r", 7)
      .style("fill", "green")
      .style("stroke", "green")
      })

我想在从第一个节点到最后一个节点的所有圆圈之间绘制一条路径，这是我到目前为止所拥有的

var lineFunction = d3.svg.line()
     .x(function(d) { return d.x; })
     .y(function(d) { return d.y; })
     .interpolate("linear");

vis.selectAll(".link")
     .data(nodes.children)
     .enter().append("path")
     .attr("class", "link")
     .attr("d", lineFunction(nodes));

但是我的lineFunction（）失败，因为节点没有x或y属性。我需要手动定义这些吗？还是我过于复杂了？

请注意，对象的数量会增加，无论数字如何，我都需要在它们之间绘制路径。

Answer 1

在您描述的情况下

var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d,i){
         return "translate(" + (i * 200) + ",0)";//circles are placed using the translate in the g
      });

圆圈不具有cx和cy，它们使用包含它的g的平移放置在它们的位置。

因此，为了绘制线条，您需要在线条函数中提供相同的x函数，而不是

var lineFunction = d3.svg.line()
     .x(function(d) { return d.x; }) //this is wrong
     .y(function(d) { return d.y; })
     .interpolate("linear");

应该更像这样

var lineFunction = d3.svg.line()
     .x(function(d) { return (i * 200) ; }) //as in translate x of circle
     .y(function(d) { return 0; })//as in translate y of circle
     .interpolate("linear");

我制作了一个小型工作片段here。

绘制圆圈之间的路径

1 个答案: