Positioning the edges using dagre-d3

Question

I have a graph where the edges are overlapping with the nodes like this

Graph

Can i make the edges start from right middle of the node instead of top center something like this image
Is there any attribute which takes care of this issue?

score 0 · Answer 1 · answered Jul 16 '15 at 12:55

0

Yeah, you should be able to do this relatively easily. You probably need to provide some code to fully demonstrate, but basically you want to add to your x-value for your lines.

.attr("x", function(d) { return d.x + nodeWidth / 2; });

So if you're adding some lines you're code might look like:

var links = d3.selectAll(".link")
              .data(data)
              .enter()
              .attr("x1", function(d) { return d.x1 + nodeWidth / 2; })
              .attr("y1", function(d) { return d.y1; })
              .attr("x2", function(d) { return d.x2; })
              .attr("y2", function(d) { return d.y2; });

answered Jul 16 '15 at 12:55

Ian

33,605
26
118
198

var g = new dagreD3.graphlib.Graph().setGraph({rankdir: "LR", nodesep:20, edgesep:25}); g.setEdge(k, vlu, { arrowhead: "vee", arrowheadStyle: "fill: #383838" }); can we pass x and y in setEdge dagre-d3 function ? – Srinivas Jul 16 '15 at 13:57
@Srinivas Sorry I hadn't realised there was another library involved. Can you paste some code/html to demonstrate how the actual rendering works? It might be you can just select all paths afterwards and move their x values across, essentially the same as my answer, but without knowing more about your code I can't give exact details. – Ian Jul 16 '15 at 14:15

score 0 · Answer 2 · answered Dec 25 '19 at 14:50

It's an old question, but for future reference, here's how I handled it:

Provide a customized shape for node:

(notice that the intersect function below is the actual part that gathers all edges to the same port)

const POINT_RADIUS = 3;
function renderNode(parent, bbox, node) {
  parent.selectAll('rect, circle').remove();
  parent.insert('circle', ':first-child')
    .attr('cx', -bbox.width / 2)
    .attr('cy', 0)
    .attr('r', POINT_RADIUS)
    .attr('class', 'port in');

  parent.insert('circle', ':last-child')
    .attr('cx', bbox.width / 2)
    .attr('cy', 0)
    .attr('r', POINT_RADIUS)
    .attr('class', 'port out');

  parent.insert('rect', ':first-child')
    .attr('x', -bbox.width / 2)
    .attr('y', -bbox.height / 2)
    .attr('width', bbox.width)
    .attr('height', bbox.height);

  node.intersect = (point) => {
    const w = node.width / 2;
    return { x: node.x + (point.x < node.x ? -w : w), y: node.y };
  };
  return parent;
}

Then assign this shape to the node shape:

const render = new dagreD3.render();
render.shapes().node = renderNode;

Positioning the edges using dagre-d3

2 Answers2