Adjust link start-end point according to node position in D3 graph

Question

Here is my sample code that shows a simple d3 graph which supports node dragging without force layout:

In this graph, while dragging nodes, the associated link always starts and ends at static points i.e. in this case, the link starts from lower middle point of source and end at top middle point of target.

What I want to achieve is when dragging node, the links start and end point should auto adjust like:

-In a case where target is at top and source just below it, then link should start at from top middle of source and end at bottom middle of target.

But in my case it appears like this, which I don't want:

-In a case where source and target are in a horizontal line where first is source and then target, then link should start at from right middle of source and end at left middle of target.

In my case it is like this:

And more cases like this...

The idea is for a link to never overlap with its own node while dragging.

Xavier Guihot · Accepted Answer

Here is a solution which attaches links to the right side of the node being dragged:

var data = {
  "nodes": [{
    "id": "source1",
    "x": 33,
    "y": 133,
    "width": 50,
    "height": 50
  },
    {
      "id": "target1",
      "x": 166,
      "y": 66,
      "width": 50,
      "height": 50
    },
    {
      "id": "source2",
      "x": 250,
      "y": 40,
      "width": 50,
      "height": 50
    },
    {
      "id": "target2",
      "x": 350,
      "y": 133,
      "width": 50,
      "height": 50
    }
  ],
  "links": [{
    "source": "source1",
    "target": "target1",
    "weight": 1,
    "id": "abc"
  },
    {
      "source": "source2",
      "target": "target2",
      "weight": 3,
      "id": "xyz"
    }
  ]
};

let svg = d3.select("svg").attr("width", 1200).attr("height", 500);

// nodes:

let nodes = svg.selectAll(".node")
  .data(data.nodes)
  .enter().append("g")
  .attr("id", d => d.id)
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
  .call(d3.drag().on("drag", dragged));

nodes.append("rect")
  .attr("width", 50).attr("height", 50)
  .attr("fill", "lime")
  .attr("rx", 5).attr("ry", 5)
  .style("stroke", "grey").style("stroke-width", "1.5").style("stroke-dasharray", "")
  .style("opacity", ".9")
  .style("cursor", "pointer");

nodes.append("text")
  .attr("x", -12).attr("y", 25)
  .attr("dx", 12).attr("dy", ".35em")
  .text(d => d.id)
  .style("cursor", "pointer");

// links:

var pathMarker = svg.append("marker").attr("id", "pathMarkerHead").attr("orient", "auto").attr("markerWidth", "8").attr("markerHeight", "12").attr("refX", "7").attr("refY", "2");
pathMarker.append("path").attr("d", "M0,0 V4 L7,2 Z").attr("fill", "navy");

svg.selectAll("linkInGraph")
  .data(data.links)
  .enter().append("path")
  .attr("class", "linkInGraph")
  .attr("id", d => d.id)
  .attr("d", moveLink)
  .style("stroke-width", "2").attr("stroke", "blue").attr("fill", "none")
  .attr("marker-end", "url(#pathMarkerHead)");

// drag behavior:

function dragged(n) {

  // Move the node:
  d3.select(this)
    .attr(
      "transform",
      d => "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")"
    );

  // Move the link:
  d3.selectAll(".linkInGraph")
    .filter(l => l.source == n.id || l.target == n.id)
    .attr("d", moveLink)
}

// link position:

function moveLink(l) {

  let nsid = data.nodes.filter(n => n.id == l.source)[0].id;
  let ndid = data.nodes.filter(n => n.id == l.target)[0].id;

  let ns = d3.select("#" + nsid).datum();
  let nd = d3.select("#" + ndid).datum();

  let min = Number.MAX_SAFE_INTEGER;
  let best = {};
  [[25, 0], [50, 25], [25, 50], [0, 25]].forEach(s =>
    [[25, 0], [50, 25], [25, 50], [0, 25]].forEach(d => {
      let dist = Math.hypot(
        (nd.x + d[0]) - (ns.x + s[0]),
        (nd.y + d[1]) - (ns.y + s[1])
      );
      if (dist < min) {
        min = dist;
        best = {
          s: { x: ns.x + s[0], y: ns.y + s[1] },
          d: { x: nd.x + d[0], y: nd.y + d[1] }
        };
      }
    })
  );

  var lineFunction = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveLinear);

  return lineFunction([best.s, best.d]);
}

Since the goal consists in avoiding overlap between the dragged node and its link, we have to attach links to the appropriate side of its nodes.

For a given link, the optimal node's sides are simply the ones which minimize the length of the link.

The idea is thus to compute the 16 sizes the link can get if it was attached to all combinations of its couple of nodes' sides; which is in our case the cartesian product of [[25, 0], [50, 25], [25, 50], [0, 25]] with itself (where a node's width/height is 50 and each elements of this list is the coordinates of the middle of a node's side).

Note the change in the svg marker at the end of links. I had to translate it a bit within the link in order to have the head of the arrow coincide with the end of the link and thus avoid having the arrow within the node.

Also note that I switched to using d3v5 to avoid making one more d3v3 legacy example (the switch back to d3v3 shouldn't be that hard if necessary).

Adjust link start-end point according to node position in D3 graph

Answers (2)

Related Questions