CODEWITHSUNDEEP
javascriptd3.jsnodes
Oliver Hoffman
Oliver Hoffman

Reputation: 550

D3.js Force links to node border

I have been trying to experiment with D3.js and while this question may sound silly, I am not capable of making the links in a graph point to the node borders instead of the node centers.

I have been using the following jsfiddle to test it, but I am still not able to do it...

http://jsfiddle.net/blonkm/zpcJa/40/light/

I suppose that I have to update something in the tick() function to return different values:

function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = 0; // straight lines (0=straight, 1=round)
        // alternatively use dr = Math.sqrt(dx * dx + dy * dy); for similar arcs
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

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

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

I would really appreciate if anyone could point me in the right direction, thanks!

Upvotes: 2

Views: 1068

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The trick to making it appear as if the links are pointing to the border is to draw the links first and then the nodes on top of them. This way, the circles will obscure the line segments that go to the center.

All you have to do for this is reorder the code, i.e. append the path elements before the circles.

Complete demo here.

Upvotes: 1

Related Questions