d3.js link seperation in tree layout

Question

what I'm trying to do is to have a gap in between the links of a d3.js tree layout in which the node name fits (See image).

http://s15.postimg.org/xn1eenxh7/linesplit.jpg

My graph looks similar to this example: http://bl.ocks.org/mbostock/4063550 What I tried to change is the d.y in the projection.

var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

Which results in a change of both parent and child links. I'm sure there is a simple solution to this, but I don't get it right now.

Thanks for any help.

Sounds like it would be easier to add the text with a rect or similar as a background that makes it appear as if the line is broken. — Lars Kotthoff
Hi Lars, thanks. Mark suggested the same so the answer below. How can it be that it is so hard to split these? They are two separated lines anyway... — kim

Mark Mark · Accepted Answer · 2015-02-27T22:27:30

To move the text, don't do it in the projection but in the transform the g container the text is in:

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y - 50) + ")"; }) //<-- -50 moves it

To break the line, add a filled white rect into the container:

node.append("rect")
  .attr('width', 32)
  .attr('height',15)
  .attr('fill', 'white')
  .attr('y', -7.5);

Example here.

d3.js link seperation in tree layout

1 Answers