Search code examples
d3.jssvgforce-layout

Change d3 force layout link style to match d3-tree look

I am undertaking yet another attempt to draw a family tree with d3. For this, I would like to use the usual node-link graph (like this one):

enter image description here

But with a link style like that usually found in d3 trees, i.e. be the Bezier curves with horizontal (or vertical) ends:

enter image description here

Is it possible to change the links accordingly, without diving into the d3-force code?

Solution

  • If you are just looking to match the style of the links, no need to dive into the d3-force code, it only calculates position, not anything related to styling.

    Each link has a x and y values for both the source and the target. If you replace the line that is found linking source and target in most force layout examples with a path, you can use these x and y values to pretty much style any type of link you want.

    I'm using d3v4+ below - your examples use d3v3.

    Option 1 - Use the Built In Links

    In d3v3 you would use d3.svg.diagonal, but now there is d3.linkVertical() and d3.linkHorizontal() to achieve the same thing. With this we can use:

    d3.linkVertical()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }));

    And then shape paths representing links with:

     link.attr("d",d3.linkVertical()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }));

    I've only done a vertical styling below - but you could determine if the difference in the x coordinates is greater than the y coordinates to determine if you should apply horizontal or vertical styling.

    var svg = d3.select("svg");
  
var nodes = "abcdefg".split("").map(function(d) {
  return {name:d};
})

var links = "bcdef".split("").map(function(d) {
  return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.name; }))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);  
      
function ticked() {
    link.attr("d", d3.linkVertical()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; }));
          
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}
    path {
   stroke: black;
   stroke-width: 2px;
   fill:none;
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">

    Option 2 - Manually Specify Path

    We can substitute the line used to connect nodes with a path, we can supply the d attribute of the path manually given the datum of the path contains the x,y of the target and the source. Perhaps something like:

    path.attr("d", function(d) {
  var x0 = d.source.x;
  var y0 = d.source.y;
  var x1 = d.target.x;
  var y1 = d.target.y;
  var xcontrol = x1 * 0.5 + x0 * 0.5;
  return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})

    Again, I've only done only one styling here, this time horizontal, but adding a check to see if horizontal or vertical links are needed should be fairly straightforward:

    enter image description here

    var svg = d3.select("svg");
  
var nodes = "abcdefg".split("").map(function(d) {
  return {name:d};
})

var links = "bcdef".split("").map(function(d) {
  return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.name; }))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);
      
      
function ticked() {
    link.attr("d", function(d) {
      var x0 = d.source.x;
      var y0 = d.source.y;
      var x1 = d.target.x;
      var y1 = d.target.y;
      var xcontrol = x1 * 0.5 + x0 * 0.5;
      return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
    })

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}
    path {
   stroke: black;
   stroke-width: 2px;
   fill:none;
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">

    Option 3 - Use a Custom Curve Generator

    I include this because I just recently answered a question on custom curves, that by chance uses the same styling. This way we can define the path of each link with:

    var line = d3.line().curve(d3.someCurve))

    and

    link.attr("d", function(d) {
  return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})

    I've added a couple lines to build on the example above too, the curves can be either vertical or horizontal:

    var curve = function(context) {
  var custom = d3.curveLinear(context);
  custom._context = context;
  custom.point = function(x,y) {
    x = +x, y = +y;
    switch (this._point) {
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default: 
        if (Math.abs(this.x0 - x) > Math.abs(this.y0 - y)) {
           var x1 = this.x0 * 0.5 + x * 0.5;
           this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);       
        }
        else {
           var y1 = this.y0 * 0.5 + y * 0.5;
           this._context.bezierCurveTo(this.x0,y1,x,y1,x,y);            
        }
        this.x0 = x; this.y0 = y; 
        break;
    }
  }
  return custom;
}

var svg = d3.select("svg");

var line = d3.line()
  .curve(curve);
  
var nodes = "abcdefg".split("").map(function(d) {
  return {name:d};
})

var links = "bcdef".split("").map(function(d) {
  return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.name; }))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);
      
      
function ticked() {
    link.
      attr("d", function(d) {
        return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
      })

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}
     path {
   stroke: black;
   stroke-width: 2px;
   fill:none;
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">

    This option will work with canvas as well (as will option 1 if I'm not mistaken).