SVG линии дуги стартовой позиции - d3.js

Question

Я пытаюсь добиться этого

, но это в настоящее время, что у меня есть По сути все, что мне нужно сделать, это выяснить, как есть линии, выходящие из круга, начинающегося с начала дуги.

Мой вопрос в том, что, как я могу перевести начальную позицию дуги в атрибут x1, y1 строки svg. Ниже приведен код, который я в настоящее время имею отношение к рисованию линии:

// Draw lines emanating out 
g.append('line') 
    .attr('class', 'outer-line') 
    .attr('x1', function(d) { 
     return 0; 
    }) 
    .attr('x2', 0) 
    .attr('y1', -radius) 
    .attr('y2', -radius-150) 
    .attr('stroke', function(d, i) { 
     return color(i); 
    }) 
    .attr('stroke-width','2') 
    .attr("transform", function(d) { 
     return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")"; 
    }); 

Answer 1

Если я правильно понимаю вашу проблему правильно, вы можете использовать только d.startAngle:

g.attr("transform", function(d) { 
    return "rotate(" + d.startAngle * (180/Math.PI) + ")"; 
}); 

посмотреть здесь пример (нажмите на «ходу фрагмент кода "):

var dataset = [300, 200, 400, 200, 300, 100, 50]; 
 

 
var width = 460, 
 
    height = 300, 
 
    radius = Math.min(width, height)/2; 
 

 
var color = d3.scale.category20(); 
 

 
var pie = d3.layout.pie() 
 
    .sort(null); 
 

 
var arc = d3.svg.arc() 
 
    .innerRadius(radius - 100) 
 
    .outerRadius(radius - 50); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
var path = svg.selectAll("path") 
 
    .data(pie(dataset)) 
 
    .enter().append("path") 
 
    .attr("fill", function(d, i) { return color(i); }) 
 
    .attr("d", arc); 
 
    
 
var g = svg.selectAll(".groups") 
 
    .data(pie(dataset)) 
 
    .enter() 
 
    .append("g"); 
 
    
 
    g.append('line') 
 
    .attr('class', 'outer-line') 
 
    .attr('x1', 0) 
 
    .attr('x2', 0) 
 
    .attr('y1', -radius + 50) 
 
    .attr('y2', -radius) 
 
    .attr('stroke', 'black') 
 
    .attr('stroke-width','2') 
 
    .attr("transform", function(d) { 
 
     return "rotate(" + d.startAngle * (180/Math.PI) + ")"; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>