경로에 텍스트를 추가하는 방법

Question

나는 틀린 나무를 짖고있다라고 생각한다 - 콘솔에서 나를 도와 주는데 오류가 없다.

나는 코드 블록있어 :

이

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")...를 시작하는 마지막 조각이 HTML로 텍스트 foo는 추가하지만이 웹 페이지에 표시되지 않습니다 - 왜 보이지 않습니까? 라벨을 어떻게 추가합니까?

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