How can I create a Ellipse object based in SVG split in eight parts based in Javascript D3?

Question

I`m trying to create in javascript a drawing based in D3 library. I saw many examples of ellipse but not split in 8 parts. I found this one but for me is being hard to figure out to create a new one.

enter code here

http://jsfiddle.net/KQ3eH/2/

THe idea is based in a datatable identify or put a different color in the section that has a fail status around the perimiter.

Example IMG:

score 1 · Accepted Answer · answered Nov 24 '16 at 18:33

You can draw the arcs using the standard d3.arc and then scale the container to make it appear as an ellipse:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
  
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 300)
      .append('g')
      .attr('transform', 'translate(250,150)scale(1.6,1)');
      
    var step =  (2 * Math.PI) / 8,
        data = d3.range(0, 2 * Math.PI , step).map(function(d){
          return {
            s: d, 
            e: d + step,
            f: Math.random() > 0.5 ? true : false
          };
        });
    
    svg.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("d", function(d){
        return d3.arc()({
          innerRadius: 0,
          outerRadius: 150,
          startAngle: d.s,
          endAngle: d.e
        });
      })
      .style("fill", function(d,i){
        return d.f ? "red" : "gray";
      })
      .style("stroke", "black");
    
  </script>
</body>

</html>

How can I create a Ellipse object based in SVG split in eight parts based in Javascript D3?

1 Answers1