7

I've got a diagram with some text written along one of the paths using a textPath. However, my problem is: I need the text to be on the other side of the text path, ie, sitting below it.

Here's an example:

Currently Sits on the Outside

I need the text here to be within the solid blue area. Ie, so you can actually read it. The blue arc here being the textPath. In other words, I just want to move the text down about 20px.

Whats really confusing me, is that I can set an "x" property on the text and move it left and right , but I can't set a "y" property to move it up or down.

I can't figure it out. Can anyone help?

Here's my code

  var labels = svg.selectAll("text.label")
      .data(partition.nodes(data))
     .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", 10)
      .attr("stroke","black")
      .style("background-color",'white')

    labels.append("textPath")
      .attr("xlink:href", function(d) { return '#' + d.name })
      .text(function(d) { return d.name.capitalize() })
VividD
  • 10,456
  • 6
  • 64
  • 111
Cheyne
  • 1,964
  • 4
  • 27
  • 43

2 Answers2

18

You can use the dy property to change the vertical alignment.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
2

Created JS fiddle example showing labels over links in D3 Forced layout chart

See working demo in JS Fiddle: http://jsfiddle.net/bc4um7pc/

var linktext = svg.append("svg:g").selectAll("g.linklabelholder").data(force.links());

linktext.enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("dx", "30")
 .attr("dy", "-5")
 .attr("text-anchor", "start")
 .style("fill","#000")
 .append("textPath")
 .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text(function(d) { 
 return d.type; 
 });
Sanjeev
  • 2,607
  • 22
  • 16