D3, SVG and textPath: how to move text down?

Question

I have a chart with some text written along one of the paths using textPath. However, my problem is this: I need the text to be on the other side of the text path, i.e. Sat under it.

Here is an example:

I need text here to be in a solid blue area. That is, you can read it. The blue arc here is textPath. In other words, I just want to move the text by about 20 pixels.

What bothers me is that I can set the “x” property in the text and move it left and right, but I cannot set the “y” property to move up or down.

I can not understand. Can anyone help?

Here is 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() }) 

Answer 1

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

Answer 2

Created a sample JS script showing labels above links in D3. Force Layout Card

See a 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; });