D3，SVG和textPath：如何向下移動文本？

我已經得到了一些使用textPath沿着其中一條路徑書寫的文本。但是，我的問題是：我需要將文本放在文本路徑的另一邊，即坐在它下面。D3，SVG和textPath：如何向下移動文本？

下面是一個例子：

Currently Sits on the Outside

我需要的文字在這裏是實心的藍色區域內。也就是說，你可以真正閱讀它。這裏的藍色圓弧是textPath。換句話說，我只想將文本向下移動約20px。

最讓我困惑的是，我可以在文本上設置一個「x」屬性並左右移動它，但是我無法設置「y」屬性來向上或向下移動它。

我找不出來。誰能幫忙？

這裏是我的代碼

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

來源

2013-04-26 Cheyne

您是否嘗試設置'dy'財產？ – 2013-04-27 12:05:33

Bah！而已。謝謝拉爾斯。您應該將其作爲答案發布，我會對其進行檢查，以便獲得積分。再次感謝 – Cheyne 2013-04-27 16:42:15

可以使用dy屬性來更改垂直對齊方式。

來源

2013-04-27 16:50:08

創建JS小提琴例子顯示了在D3的鏈接標籤強制佈局圖

見JS小提琴工作演示：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; 
});

來源

2014-09-12 06:35:48 Sanjeev

D3，SVG和textPath：如何向下移動文本？

回答

相關問題