D3 layout: a straight line instead of a curve for links (but only for some links)

I have a D3 jsfiddle that creates the following diagram:

enter image description here

The only thing that bothers me in this diagram is that if there is only one connection between two nodes, it is drawn as a curve. I think it would be much better if such links were just straight (the arrow would be fine). Say, between Microsoft and Amazon there should be only a straight line (with an arrow). The same thing between Oracle and Google, Sony and LG, etc.

How to do it?

+4
source share
2 answers

. linkArc(d) dr 0, 1 , . , .

, , . , .

links.forEach(function(d) {
    if (nodes[d.source.name].children==undefined) {
        nodes[d.source.name].children=0;
    }
    nodes[d.source.name].children++
});

, :

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = (nodes[d.target.name].children>1 & nodes[d.source.name].children>1)?Math.sqrt(dx * dx + dy * dy):0;
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

:

here

, , . , .

+6

@Nikos:

links.forEach(function(d) {
    d.straight = 1;
    links.forEach(function(d1) {
        if ((d.source == d1.target) && (d1.source == d.target))
            d.straight = 0;
    });
});

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = (d.straight == 0)?Math.sqrt(dx * dx + dy * dy):0;
  return "M" + d.source.x + "," + d.source.y +
      "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

: ( )

enter image description here

jsfiddle

+1

All Articles