Multiple straight line between two node in d3.js

问题

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},
                    ]

sample code

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/

回答1:

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.

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.

来源：https://stackoverflow.com/questions/21274870/multiple-straight-line-between-two-node-in-d3-js

标签

d3.js