Question

I am trying to generate below image but I left Icon rotated in different direction and also how can I make out side arc border to different color

I have googled most of other codes with Path and g but I opted to create this way for simple arcs with different start , end points and circles at center by calculating radius.

My JS Fiddle for easy look

https://jsfiddle.net/2dg07v13/

预期

 let width = 400,
        height = 400,
        margin = 50,
        outerRadius = Math.min(width - margin, height - margin) / 2,  
        innerRadius = Math.min(width - margin, height - margin) / 8,  
        colors = d3.scale.category20(),
        noOfArcs= 7,
        minArcRadius= 20,
        fillColor="#F1F1F1",
        stroke="#FCFCFC",
        completeColor= "#9ACECC",
        strokeWidth="2",
        cScale = d3.scale.linear().domain([0, (noOfArcs*minArcRadius)]).range([0, 2 * Math.PI]),
        cx = (width/2 + ((outerRadius) * Math.sin(0))),
        cy = (height/2 - ((outerRadius) * Math.cos(0))),
        cr=360/noOfArcs,
        arcData= [],
        circles= [];

  for(i = 0; i++ < noOfArcs; ){
      let j= i +1;
     appendArcs(arcData,i*minArcRadius,j*minArcRadius,stroke,outerRadius+5, fillColor)
     appendArcs(arcData,i*minArcRadius,j*minArcRadius,fillColor,outerRadius, stroke)
     circles.push({"r":20, "angle":cr*i + cr/2})
  }

//append Children
      appendArcs(arcData,20,40,completeColor,innerRadius+30);
      appendArcs(arcData,40,60,completeColor,innerRadius+60);
      appendArcs(arcData,80,100,completeColor,innerRadius+100);



let arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function(d){return  d.outerRadius;})
.startAngle(function(d){  return cScale(d.start);})
.endAngle(function(d){  return cScale(d.end);});



let svg = d3.select("body")
            .append("svg")
            .attr("width", width)
             .attr("height", height);


svg.selectAll("path")
    .data(arcData)
    .enter()
    .append("path")
    .attr("d", arc)
    .style({"stroke": function(d) {
      return d.stroke;
    }, "stroke-width": strokeWidth, "fill":function(d){return d.color;}})
    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");


svg.selectAll("circle")
.data(circles)
.enter().
append('circle')
.attr({
    cx:cx,
    cy:cy,
    r: function(d){ return d.r;},
    fill: "green",
    stroke: "black",
   transform: function(d){return "rotate(" + d.angle +"," + height/2 +"," + width/2  + ")" }
});


svg.selectAll("text")
.data(circles)
.enter()
.append("text")
.attr("x", cx)
.attr("y", cy)
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr('font-size',"1em")
.attr("stroke", "white")
.attr("transform", function(d){return " translate(" + (width / 2) + "," + (height / 2) + ") rotate(" + d.angle + ") translate(" + (-width / 2) + "," + -((height / 2)+10) + ")    " })
.html("&#x2713;");

function appendArcs(arcData, start, end,  color, outerRadius, stroke){
      arcData.push({"start":start, "end":end, "color":color, "outerRadius":outerRadius,"stroke":stroke})

}

Answer 1

您可以使用三角函数（Math.sin和Math.cos）来翻译它们，而不是旋转文本：

.attr("transform", function(d) {
        console.log(d.angle);
        return "translate(" + ((width / 2) + (width / 2.3) * Math.sin((d.angle + 25) * (Math.PI / 180))) 
        + "," + ((height / 1.95) + (height / 2.3) * Math.cos((d.angle + 25) * (Math.PI / 180))) + ")"
    })
    .html("&#x2713;");

这只是一般性的想法，你必须改进数学。

查看演示：

＆＃13;

 let width = 400,
        height = 400,
        margin = 50,
        outerRadius = Math.min(width - margin, height - margin) / 2,  
        innerRadius = Math.min(width - margin, height - margin) / 8,  
        colors = d3.scale.category20(),
        noOfArcs= 7,
        minArcRadius= 20,
        fillColor="#F1F1F1",
        stroke="#FCFCFC",
        completeColor= "#9ACECC",
        strokeWidth="2",
        cScale = d3.scale.linear().domain([0, (noOfArcs*minArcRadius)]).range([0, 2 * Math.PI]),
        cx = (width/2 + ((outerRadius) * Math.sin(0))),
        cy = (height/2 - ((outerRadius) * Math.cos(0))),
        cr=360/noOfArcs,
        arcData= [],
        circles= [];
  
  for(i = 0; i++ < noOfArcs; ){
      let j= i +1;
     appendArcs(arcData,i*minArcRadius,j*minArcRadius,stroke,outerRadius+5, fillColor)
     appendArcs(arcData,i*minArcRadius,j*minArcRadius,fillColor,outerRadius, stroke)
     circles.push({"r":20, "angle":cr*i + cr/2})
  }

//append Children
      appendArcs(arcData,20,40,completeColor,innerRadius+30);
      appendArcs(arcData,40,60,completeColor,innerRadius+60);
      appendArcs(arcData,80,100,completeColor,innerRadius+100);
      


let arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function(d){return  d.outerRadius;})
.startAngle(function(d){  return cScale(d.start);})
.endAngle(function(d){  return cScale(d.end);});

 
 
let svg = d3.select("body")
            .append("svg")
            .attr("width", width)
             .attr("height", height);


svg.selectAll("path")
    .data(arcData)
    .enter()
    .append("path")
    .attr("d", arc)
    .style({"stroke": function(d) {
      return d.stroke;
    }, "stroke-width": strokeWidth, "fill":function(d){return d.color;}})
    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");


svg.selectAll("circle")
.data(circles)
.enter().
append('circle')
.attr({
    cx:cx,
    cy:cy,
    r: function(d){ return d.r;},
    fill: "green",
    stroke: "black",
   transform: function(d){return "rotate(" + d.angle +"," + height/2 +"," + width/2  + ")" }
});


svg.selectAll("text")
.data(circles)
.enter()
.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("text-anchor", "middle")
.attr('font-size',"1em")
.attr("stroke", "white")
.attr("transform", function(d){ return "translate(" + ((width / 2) + (width / 2.3) * Math.sin((d.angle+25)*(Math.PI/180))) +  "," + ((height / 1.95) + (height / 2.3) * Math.cos((d.angle+25)*(Math.PI/180))) + ")"})
.html("&#x2713;");
    
function appendArcs(arcData, start, end,  color, outerRadius, stroke){
      arcData.push({"start":start, "end":end, "color":color, "outerRadius":outerRadius,"stroke":stroke})

}

＆＃13;

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

＆＃13;

D3 JS Arch with Circle at border

1 个答案: