d3 조인 및 텍스트 위치 지정을 사용하는 SVG 조작

Question

저는 d3으로 다이어그램을 만들려고 노력해 왔습니다. 그리고 저는 이제 막 조정 한 도넛 형 차트 인 제가 선택한 차트를 보았습니다.

는 여기에 바이올린을의 http://jsfiddle.net/Qxhzd/1/

그리고 내 코드 :

function jsonToPieSlices(jsonScores) { 
data = []; 
var total_scores = 0; 
for (var i in jsonScores){ 
    total_scores += parseInt(jsonScores[i].score, 10); 
} 
var factor = 100/total_scores; 
var previous_angle = 0; 

for (var i in jsonScores) { 
    current_angle = ((jsonScores[i].score*factor)+previous_angle); 
    data.push([previous_angle, current_angle, jsonScores[i].color]); 
    previous_angle = current_angle; 
} 
return data; 
} 

function multi_nut() { 

var jsonScores = [{'topic': 'Credit Card Processing', 'total_scores': 35, 'scale': 1, 'position': '150,200', 'scores':[ 
        {"color": '#522275', "name": 'site1.com', "score": 7}, 
        {"color": '#5C6BD6', "name": 'site2.com', "score": 18}, 
        {"color": '#FF7D33', "name": 'site3.com', "score": 3}, 
        {"color": '#FFC433', "name": 'site4.com', "score": 2}, 
        {"color": '#41B224', "name": 'site5.com', "score": 2}, 
        {"color": '#36835D', "name": 'site6.com', "score": 3}]}, 

        {'topic': 'Credit Card Reader', 'total_scores': 38, 'scale': 0.409090909, 'position': '650,250', 'scores':[ 
        {"color": '#522275', "name": 'site1.com', "score": 7}, 
        {"color": '#5C6BD6', "name": 'site2.com', "score": 8}, 
        {"color": '#FF7D33', "name": 'site3.com', "score": 8}, 
        {"color": '#FFC433', "name": 'site4.com', "score": 5}, 
        {"color": '#41B224', "name": 'site5.com', "score": 7}, 
        {"color": '#36835D', "name": 'site6.com', "score": 3}]}, 

        {'topic': 'Mobile Payments', 'total_scores': 10, 'scale': 0.318181818, 'position': '900,560', 'scores':[ 
        {"color": '#522275', "name": 'site1.com', "score": 4}, 
        {"color": '#5C6BD6', "name": 'site2.com', "score": 3}, 
        {"color": '#FF7D33', "name": 'site3.com', "score": 1}, 
        {"color": '#FFC433', "name": 'site4.com', "score": 0 }, 
        {"color": '#41B224', "name": 'site5.com', "score": 0}, 
        {"color": '#36835D', "name": 'site6.com', "score": 2}]}, 

        {'topic': 'Android Readers', 'total_scores': 9, 'scale': 0.136363636, 'position': '1950,1700', 'scores':[ 
        {"color": '#522275', "name": 'site1.com', "score": 3}, 
        {"color": '#5C6BD6', "name": 'site2.com', "score": 0}, 
        {"color": '#FF7D33', "name": 'site3.com', "score": 3}, 
        {"color": '#FFC433', "name": 'site4.com', "score": 0}, 
        {"color": '#41B224', "name": 'site5.com', "score": 3}, 
        {"color": '#36835D', "name": 'site6.com', "score": 0}]}, 

        {'topic': 'Iphone Readers', 'total_scores': 22, 'scale': 0.318181818, 'position': '950,850', 'scores':[ 
        {"color": '#522275', "name": 'site1.com', "score": 7}, 
        {"color": '#5C6BD6', "name": 'site2.com', "score": 3}, 
        {"color": '#FF7D33', "name": 'site3.com', "score": 5}, 
        {"color": '#FFC433', "name": 'site4.com', "score": 0}, 
        {"color": '#41B224', "name": 'site5.com', "score": 7}, 
        {"color": '#36835D', "name": 'site6.com', "score": 0}]}, 
]; 




var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]); 
var vis = d3.select("#svg_donut"); 

for (var i in jsonScores) { 
data = jsonToPieSlices(jsonScores[i].scores); 

var translation = "scale("+jsonScores[i].scale+") translate("+jsonScores[i].position+")" 
// if (i==2) alert(translation); 

var arc = d3.svg.arc() 
.innerRadius(50) 
.outerRadius(100) 
.startAngle(function(d){return cScale(d[0]);}) 
.endAngle(function(d){return cScale(d[1]);}); 


vis.append('g') 
.attr('id', "group-"+i) 
.attr('class', "node") 
.selectAll("path") 
.data(data) 
.enter() 
.append("path") 
.attr("d", arc) 
.style("fill", function(d){return d[2];}) 


.attr("transform", translation) 
.transition().delay(function(d, i) { return i * 500; }).duration(500) 
    .attrTween('d', function(d) { 
     var i = d3.interpolate(d.startAngle+0.1, d.endAngle); 
     return function(t) { 
      d.endAngle = i(t); 
     return arc(d); 
     } 
    }) 

} 



multi_nut(); 

내 질문은 2 배입니다 : I 차트 (현재 I + 1)으로의 수를 얻을 필요가 빠른 수정으로 각 차트의 중심 내 모든 시도는 텍스트가 각 차트가 포함 된 그룹이 아닌 문서에 상대적으로 배치되도록합니다.

큰 그림에서 나는 내가 넣은 끔찍한 루프없이 데이터를 사용하여이 작업을 할 수 있어야한다고 확신한다. 어떤 종류의 버블 레이아웃을 사용합니다.

도움을 주시면 감사하겠습니다!

Answer 1

변수에 <g> 그룹화 요소를 저장해야 나중에 텍스트를 추가 할 수 있습니다.

var g = vis.append('g') 
    .attr('id', "group-"+i) 
    .attr('class', "node") 
    .attr("transform", translation); 
    //translate the entire group, not individual paths 

g.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", arc) 
    .style("fill", function(d){return d[2];}) 

g.append("text") //add a single text element to each group 
    .text(i+1); 

그러나 다시는 다중 원형 차트 예를 살펴 및 for 루프없이 한 번에 모든 파이 차트를 그리는 방법을 알아 내기 위해 this tutorial on nested selections를 참조하십시오. 텍스트 요소는 부모 그룹의 데이터를 자동으로 상속하므로 중첩 선택을 사용하면 .text(function(d,i) {return i+1;})을 사용하여 차트 인덱스에 액세스 할 수 있습니다.