Drehen Text um einen Kreis

Question

Ich mag würde einige Text (Zahlen) drehen, die ich um einen Kreis angeordnet sind, erscheinen wie folgt aus:

die Rotation anwenden Ich habe dies versucht: .attr("transform", function(d, i) { return "rotate(" + (-90 + ((360/dial.length) * i)) + ", 135, 135)"; }); aber es wirft alles raus.

Hier ist ein fiddle.

Answer 1

Die Lösung von @GerardoFurtado ist gut, aber wenn man alles im Ursprung positionieren können Sie den Code einiges vereinfachen.

Fühlen Sie sich frei, seine Antwort zu akzeptieren. Ich wollte nur auf Effizienz hinweisen.

var width = height = 300, 
 
    circleRadius = (width/2) * .8, 
 
    digitRadius = (width/2) * .9; 
 

 
svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    // Everything inside the group is centred at the origin and we use 
 
    // a transform on the group to move the whole group to the centre of the SVG 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
svg.append("circle") 
 
    .attr("r", circleRadius) 
 
    .style("fill", "none") 
 
    .style("stroke", "black"); 
 

 
dial = [1, 2, 3, 4, 5, 6, 7, 8]; 
 

 
// Position text at X=radius, Y=0 and rotate around the origin to get final position 
 
svg.selectAll("text") 
 
    .data(dial) 
 
    .enter() 
 
    .append("text") 
 
    .attr("x", digitRadius) 
 
    // tweak digit Y position a little to ensure it's centred at desired position 
 
    .attr("y", "0.4em") 
 
    .text(function(d, i) { return d; }) 
 
    .attr("transform", function(d, i) { return "rotate(" + (-90 + ((360/dial.length) * i)) + ")"; });

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

Answer 2

Die Lösung gefunden wurde, um die zusätzlichen Werte für rotate ändern, wo <x><y> und Werte, die die Koordinaten des Punktes repräsentieren als Rotationszentrum verwendet .:

rotate(<a> [<x> <y>]) 

I geändert <x> und <y> für center und änderte Ihre x und y Positionen entsprechend.

var width = height = 300, 
 
    radius = center = (width/2) * .9; 
 

 
svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", function(d) { return "translate(" + (radius * .1)/2 + "," + (radius * .1)/2 + ")"; }); 
 

 
svg.append("circle") 
 
    .attr("cx", radius) 
 
    .attr("cy", radius) 
 
    .attr("r", radius*.9) 
 
    .style("fill", "none") 
 
    .style("stroke", "black"); 
 

 
// Calculate dial start and end. 
 
dial = [1, 2, 3, 4, 5, 6, 7, 8]; 
 

 
svg.selectAll("text") 
 
    .data(dial) 
 
    .enter() 
 
    .append("text") 
 
    .attr("x", function(d, i) { return center + radius * Math.cos(2 * Math.PI/dial.length-0.75); }) 
 
    .attr("y", function(d, i) { return center + radius * Math.sin(2 * Math.PI/dial.length-0.75); }) 
 
    .text(function(d, i) { return d; }) 
 
    .attr("transform", function(d, i) { return "rotate(" + (-90 + ((360/dial.length) * i)) + "," + center + "," + center + ")"; });

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

Hier ist die Geige: https://jsfiddle.net/gerardofurtado/24heuL1h/1/