Right angle link style in a d3.js hierarchical tree

Question

I am trying to render a simple hierarchical tree using d3.js.

I can find a lot of code example of such tree, but none of them have the style of links that I want.

This example is fine for my needs, but I can't manage to display everything vertically with right-angle turn: https[:]//codepen.io/zhulinpinyu/pen/EaZrmM

How can I change this to fit the following layout ?

Thanks

Robin Mackenzie · Accepted Answer

You are looking for an indented tree.

See below, based on this example:

const margin = {top: 30, right: 20, bottom: 30, left: 20}
const width = 960;
const barHeight = 20;
const barWidth = (width - margin.left - margin.right) * 0.8;
const duration = 400;
let i = 0;
let root;

const elbow = d => `M${d.source.y},${d.source.x} V${d.target.x} H${d.target.y}`;

const color = d => d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";

const update = (source) => {

  // Compute the flattened node list
  const nodes = root.descendants();

  const height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);

  d3.select("svg").transition()
    .duration(duration)
    .attr("height", height);

  // Compute the layout
  root.eachBefore((n, i) => {
    n.x = i * barHeight;
    n.y = n.depth * 40;
  });

  // Update the nodes…
  const node = svg.selectAll(".node")
    .data(nodes, d => d.id || (d.id = ++i));

  const nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${source.y0},${source.x0})`)
    .style("opacity", 0)
    .on("click", click);
      
  nodeEnter.append("circle")
    .attr("r", 7)
    .style("fill", d => d.children ? "lightsteelblue" : "#fff");
      
  nodeEnter.append("text")
    .attr("dy", 3.5)
    .attr("dx", d => 10 + d.depth)
    .text(d => d.data.name);
    
  // update
  var nodeUpdate = node.merge(nodeEnter)
    .transition()
    .duration(duration);
    
  nodeUpdate
    .attr("transform", d => `translate(${d.y},${d.x})`);

  nodeUpdate
    .attr("r", 7)
    .style("fill", d => d.children ? "lightsteelblue" : "#fff");
    
  nodeUpdate
    .select("text")
    .style("fill-opacity", 1);

  // Transition nodes to their new position.
  nodeEnter.transition()
    .duration(duration)
    .attr("transform", d => `translate(${d.y},${d.x})`)
    .style("opacity", 1);

  node.transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
    .style("opacity", 1);

  // Transition exiting nodes to the parent's new position.
  node.exit()
    .transition()
    .duration(duration)
    .attr("transform", d => `translate(${source.y}, ${source.x}")`)
    .style("opacity", 0)
    .remove();

  var nodeExit = node.exit()
    .transition()
    .duration(duration);
  
  nodeExit.attr("transform", d => `translate(${source.y},${source.x})`)
    .remove();

  nodeExit.select("circle")
    .attr("r", 1e-6);

  nodeExit.select("text")
    .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll(".link")
    .data(root.links(), d => d.target.id);

  // Enter any new links at the parent's previous position.
  link.enter()
    .insert("path", "g")
    .attr("class", "link")
    .attr("d", d => {
      const o = {x: source.x0, y: source.y0};
      return elbow({source: o, target: o});
    })
    .transition()
    .duration(duration)
    .attr("d", elbow);

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", elbow);

  // Transition exiting nodes to the parent's new position.
  link.exit()
    .transition()
    .duration(duration)
    .attr("d", d => {
      const o = {x: source.x, y: source.y, parent: {x: source.x, y: source.y}};
      return elbow({source: o, target: o});
    })
    .remove();

  // Stash the old positions for transition.
  root.each(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

const click = (event, d) => {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

// svg
const svg = d3.select("body")
  .append("svg")
  .attr("width", width) 
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// initial tree
root = d3.hierarchy(data);
root.x0 = 0;
root.y0 = 0;
update(root);

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1px;
}

.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

Right angle link style in a d3.js hierarchical tree

Answers (1)

Related Questions