如何创建一个基于 SVG 的椭圆对象，该对象基于 Javascript D3 分为八个部分？

Question

我正在尝试在 javascript 中创建基于 D3 库的绘图。我看到很多椭圆的例子，但没有分成 8 个部分。我找到了这个，但对我来说很难弄清楚如何创建一个新的。

enter code here

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

这个想法是基于一个数据表来识别或在边界周围有失败状态的部分中放置不同的颜色。

IMG 示例：

Answer 1

您可以使用标准 d3.arc 绘制圆弧，然后缩放容器以使其显示为椭圆：

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

如何创建一个基于 SVG 的椭圆对象，该对象基于 Javascript D3 分为八个部分？

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

javascript

d3.js

svg

drawing

ellipse