d3.js中的两个节点之间有多条直线 [英] Multiple straight line between two node in d3.js

问题描述

如何在两个节点之间添加多条直线。下面的小提琴显示弧线。可以在直线之间用线之间的特定间隔改变它。
我找到答案。

但是在下面的小调 http：// jsfiddle。 net / manimegala / FC832 / 可以在两个节点之间绘制多行。但是当我拖动一个节点时，链接彼此重叠。请帮助我在两个节点之间画多条线而不重叠。
样本数据

How to add a multiple straight line between two nodes. The following fiddle shows the arc line. Can change it in straight line with the particular space between lines. I found answer.
But in the following fiddle http://jsfiddle.net/manimegala/FC832/ can draw multiple line between two nodes. But when I drag a node, the link overlap with each other. Please help me to draw multiple line between two nodes without overlap. sample data

"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/

推荐答案

路径形状 tick 函数在这种情况下是一个椭圆形路径，所以你需要做的是将dr设置为0，如;

The path shape is defined in the tick function which in this case is an elliptical path, so all you need to do is set dr to 0, like;

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;
  });

当然，你会丢失一些链接连接的信息，

Of course you'll loose the information from some of the link connections doing this as they'll be overlayed on each other.

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

You could also change the path from an ellipse which would require changing the return statement in the tick function - but this would require slightly more work.

这篇关于d3.js中的两个节点之间有多条直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！