D3.js 벤 다이어그램 텍스트

Question

내가 벤 다이어그램을 작성하려면이 좋은 예를 사용하고 레이블 : 나는 현재 모든 노드 (작은 원) 만에 텍스트 레이블을 넣어하려고 http://bl.ocks.org/christophe-g/b6c3135cc492e9352797

나는 새로운 오전부터 D3.js 라이브러리이 작업을 수행하는 데 어려움을 겪고 있습니다. 모든 노드에 텍스트 레이블을 할당 할 수있었습니다 (예 : Firebug와 같은 HTML 코드를 검사하여 볼 수 있음). 그러나 텍스트 레이블은 표시되지 않습니다. 노드에 보이는 텍스트 레이블을 붙이려면 어떻게해야합니까?

텍스트 레이블이 노드에 표시되지 않습니다하는 코드가있는 바이올린은 아래에서 확인할 수 있습니다

/* Create the text for each individual circle */ 
    pointsEnter.append("text") 
    .attr("class", "label") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".40em") 

    pointsEnter.selectAll("text.label").data(function(d) { 
     return [d]; 
    }) 
    .text(function(d) { 
     return d.name; 
    }) 
    .attr("x", function(d) { 
     return d.x 
    }) 
    .attr("y", function(d) { 
     return d.y 
    }); 

https://jsfiddle.net/ej5uz83n/1/

어떤 도움을 크게 감사합니다.

Answer 1

지금 텍스트 요소를 서클에 추가하려고 시도하고 있습니다. SVG에서 텍스트 요소를 추가 할 수 없습니다. 그것을 해결하는 가장 간단한 방법은 각 circle/text 쌍하는 g 요소를 추가 한 다음에 이들을 함께 배치하는 인 transform :

가

var points = circleContainer.selectAll("circle.node") 
    .data(function(d) { 
    return d.nodes 
    }, function(d) { 
    return d.name 
    });  

// group for circle and text 
var g = points.enter().append("g"); 

g.append('circle') 
    .attr('r', 0) 
    .attr('class', 'node') 
    .call(layout.packer().drag); 

/* Create the text for each individual circle */ 
g.append("text") 
    .attr("class", "label") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".40em") 
    .text(function(d){ 
    return d.name; 
    }) 
    .style("fill", "black"); 

g.selectAll("circle").transition() 
    .duration(isFirstLayout ? 0 : test.duration()) 
    .attr('r', function(d) { 
    return d.r 
    }); 

points.exit().transition() 
    .attr('r', 0) 
    .remove(); 

은 "종목"함수는 다음이된다 :

ticker: function() { 
    g.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
    }) 
} 

업데이트 fiddle.