Question

如何在两个节点之间添加多条直线。以下小提琴显示弧线。可以用直线之间的特定空间直线改变它。我找到了答案但是在下面的小提琴中http://jsfiddle.net/manimegala/FC832/可以在两个节点之间绘制多条线。但是当我拖动一个节点时，链接会相互重叠。请帮我在两个节点之间绘制多条线而不重叠。样本数据

"links":[
                    {"source":0,"target":1,"value":1,"distance":5,"no":1},
                    {"source":0,"target":1,"value":1,"distance":5,"no":2},
                    {"source":0,"target":1,"value":1,"distance":5,"no":3},                  

                    {"source":0,"target":1,"value":1,"distance":6,"no":4},
                    {"source":0,"target":1,"value":1,"distance":6,"no":5},
                    {"source":6,"target":0,"value":1,"distance":6,"no":1},
                    {"source":7,"target":1,"value":1,"distance":6,"no":1},
                    {"source":8,"target":0,"value":1,"distance":6,"no":1},
                    {"source":7,"target":8,"value":1,"distance":6,"no":1},
                    ]

示例代码

force.on("tick", function() {
          link.attr("x1", function(d) { return d.source.x+(d.no*4);})
              .attr("y1", function(d) { return d.source.y+(d.no*4);})
              .attr("x2", function(d) { return d.target.x+(d.no*4);})
              .attr("y2", function(d) { return d.target.y+(d.no*4);});

          node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        });

http://jsfiddle.net/manimegala/FC832/

Answer 1

路径形状在tick函数中定义，在这种情况下是一个椭圆路径，因此您需要做的就是将dr设置为0，就像;

function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = 0; //set this to 0 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

当然，你会从一些链接连接中丢失信息，因为它们会相互叠加。

您还可以从椭圆中更改路径，这需要更改tick函数中的return语句 - 但这需要稍微多一些工作。

d3.js中两个节点之间的多条直线

1 个答案: