D3 직사각형에 텍스트 추가

Question

D3 트리 맵 차트에서 여러 직사각형의 중심에 텍스트를 추가 할 수 있습니까? 당신이 그림에서 볼 수 있듯이, 내가 텍스트를 갖고 싶어

가 (다른 색) 각 "섹션"의 중간에 한 번 나타나는 차트 : 그래서 난 후는이 같은 것입니다 . D3에서이 작업을 수행 할 수 있습니까? 그렇다면 어떻게 달성 할 수 있을까요?

현재 나는과 같이, 각각의 사각형에 표시가 관리했습니다 :

cell.append("svg:text") 
     .attr("x", function(d) { return d.dx/2; }) 
     .attr("y", function(d) { return d.dy/2; }) 
     .attr("dy", ".35em") 
     .text("test") 
     .style("opacity", function(d) { console.log(this.getComputedTextLength());d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; }); 

전체 코드는 여기에 있습니다 : http://jsfiddle.net/noobiecode/9ev9qjt3/74/

어떤 도움을 이해할 수있을 것이다.

Answer 1

이러한 텍스트를 추가하려면 먼저 해당 데이터를 찾아야합니다. 현재, nodes에는 모든 다른 깊이 (부모 및 자식)에 대한 데이터가 있지만이 텍스트의 경우 두 번째 깊이 (깊이 == 2)의 데이터 만 필요합니다.

그래서 우리는 먼저 데이터를 얻을 :

var parents = treemap.nodes(root) 
    .filter(function(d) { return d.depth == 2 }); 

그것은 우리에게 세 가지 객체 배열을 제공을, 그래서 우리는 올바른 방법에 있습니다. 이 배열 (parents)에는 텍스트 배치에 필요한 모든 것이 있습니다 (x, y, dx, dy, name).

그런 다음, 우리는 본문에이 데이터를 바인딩 :

parentsText.attr("text-anchor", "middle") 
    .attr("dominant-baseline", "central") 
    .attr("x", function(d){ return d.x + d.dx/2}) 
    .attr("y", function(d){ return d.y + d.dy/2}) 
    .text(function(d){ return d.name}) 
    .attr("class", "parentText"); 

그리고이 결과 바이올린입니다 : http://jsfiddle.net/gerardofurtado/9ev9qjt3/94/

당신이 할 수있는

이

var parentsText = svg.selectAll(".parentsText") 
    .data(parents) 
    .enter() 
    .append("text"); 

는 그 후, 우리는 텍스트를 추가 또한 각 직사각형과 그룹에 대한 텍스트가 있습니다 (그러나이 경우 중복되는 텍스트를 멀리 옮길 수 있습니다) : http://jsfiddle.net/gerardofurtado/9ev9qjt3/95/