パスにテキストを追加するには

Question

私は間違ったツリーを吠えていると思うが、コンソールでエラーが表示されない。

私はこのコードのブロックを持っている：path.append("title")...を開始

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"); 

コードスニペットは、[OK]を動作しますが、path.append("text")...を始め、最終的なスニペットは、HTMLにテキストFOOを追加しますが、それはWebページに表示されていない - なぜ表示されないのですか？ラベルを追加するにはどうすればよいですか？

これは、視覚の一部です：

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

Answer 1

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"); 

Answer 2

作業コードは、次のように終了：

あなたが持っているしたい場合があり、このすべてを網羅本当に綿密なチュートリアルについては

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");