SVG Linie aus Bogenstartposition - d3.js

Question

Ich versuche, diese

zu erreichen, aber dies ist derzeit, was ich habe im Wesentlichen alles, was ich tun muß, ist, herauszufinden, wie das haben, Linien, die aus dem Kreis ausgehen, beginnend am Bogenanfang.

Meine Frage ist genau das, wie kann ich die Startposition des Bogens in das x1, y1-Attribut einer Svg-Linie übersetzen. Im Folgenden ist der Code, den ich gerade Zeichnen der Linien haben im Zusammenhang:

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

prüfen ein Beispiel (klicken Sie auf „run:

// 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

Wenn ich dein Problem richtig verstehe, können Sie einfach d.startAngle verwenden Code-Schnipsel "):

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>