如何將文本添加到路徑

我懷疑我在咆哮錯誤的樹 - 雖然我沒有在控制檯中的錯誤來幫助我。如何將文本添加到路徑

我有這段代碼：

var path = svg.data([json]).selectAll("path") 
    .data(partition.nodes) 
    .enter() 
    .append("path") 
    .attr("display", function(d) { 
     return d.depth ? null : "none"; 
    }) 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { 
     return color((d.children ? d : d.parent).name); 
    }) 
    .attr("fill-rule", "evenodd") 
    .style("opacity", 1) 
    .each(stash); 

//>>this section functions ok 
path.append("title") 
    .text(function(d) { 
     return d.name + ": " + d.amount; 
    }); 

//>>this section throws no errors but "foo" does not appear 
path.append("text") 
    .text(function(d) { 
     return "foo"; 
    }) 
    .style("stroke", "#3b5998") 
    .style("fill", "#3b5998");

開始path.append("title")...代碼段工程確定，但開始path.append("text")...最後片段添加文本FOO到HTML，但它不是網頁上可見的 - 爲什麼它不可見，我如何添加標籤？

這是此視覺的一部分：

http://plnkr.co/edit/q9ODd5?p=preview

來源

2016-11-10 whytheq

對於真正深入教程涵蓋所有這一切，你可能希望有看看[*「使用D3.js在弧上放置文本」*]（http://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html）。這是值得的時間！ – altocumulus

@altocumulus偉大的鏈接 - 謝謝....看！ http://run.plnkr.co/plunks/V4Zr16/ – whytheq

text不能嵌套用path。您需要將其添加到svg。此外，你要以某種方式定位文本：

svg.append("text") 
    .text(function(d) { 
     return "foo"; 
    }) 
    .attr("x", function(){ return 0 }) 
    .attr("y", function(){ return 0 }) 
    .style("stroke", "#3b5998") 
    .style("fill", "#3b5998");

來源

2016-11-10 15:43:24 Duopixel

感謝您的幫助 - 我添加了下面的代碼，將標籤分發到每個弧 – whytheq

工作結束代碼如下所示：

var path = svg.data([json]).selectAll(".theArc") 
    .data(partition.nodes) 
    .enter() 
    .append("path") 
    .attr("class", "theArc") //<<<<<<<<<<new 
    .attr("id", function(d,i) { return "theArc_"+i; }) //Give each slice a unique ID //<<<<<<<<<<new jq 
    .attr("display", function(d) { 
     return d.depth ? null : "none"; 
    }) 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { 
     return color((d.children ? d : d.parent).name); 
    }) 
    .attr("fill-rule", "evenodd") 
    .style("opacity", 1) 
    .each(stash); 

path 
    .append("title") //mouseover title showing the figures 
    .text(function(d) { 
     return d.name + ": " + d.amount; 
    }); 

svg.data([json]).selectAll(".theTxts") 
    .data(partition.nodes) 
    .enter() 
    .append("text") 
    .attr("class", "theTxts") 
    .attr("dx", 10) //Move the text from the start angle of the arc 
    .attr("dy", 18) //Move the text down 
    .append("textPath") 
    .attr("xlink:href", function(d, i) { 
     return "#theArc_" + i; 
    }) 
    .text(function(d) { 
     return d.name; 
    }) 
    .style("stroke", "#3b5998") 
    .style("fill", "#3b5998");

來源

2016-11-10 17:23:13 whytheq

如何將文本添加到路徑

回答

相關問題