javascript - D3 - 径向堆叠条 - 如何添加背景段

Question

我的径向堆叠条形图/分段图基于此块。但是，我发现在某些方面很难定制。例如，我想在每个段中创建一些背景颜色。即，我希望最远的层后面是"#a6a6a6"灰色的，然后在上面我希望另一个稍窄的部分是"#fff"白色的。然后，只有这样，我才想动态附加径向堆叠段。回顾一下：

• 最顶层：彩色编码段
• 中层：白色（较窄）
• 底层：灰色

结果应该是白色空间背景顶部的颜色编码段，灰色边框分隔每个段（根据 x 轴）。我最初考虑使用 astroke但锥度不正确（它对 来说太厚了innerRadius）。

我的尝试如下：

  graphGroup.append("g")
    .selectAll("g")
    .data(d3.stack().keys(data.columns.slice(1))(data))
    .enter().append("g")
      .attr("fill", function(d) { return z(d.key); })
    .selectAll("path")
    .data(function(d) { return d; })
    .enter().append("path")
      .attr("d", d3.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          .startAngle(function(d) { return x(d.data.State); })
          .endAngle(function(d) { return x(d.data.State) + x.bandwidth(); })
          .padAngle(0.04)
          .padRadius(innerRadius))
      .attr('fill','#a6a6a6')
      .enter().append("path")
        .attr("d", d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(function(d) { return x(d.data.State)+10; })
            .endAngle(function(d) { return x(d.data.State) + x.bandwidth()-10; })
            .padAngle(0.04)
            .padRadius(innerRadius))
        .attr('fill','#fff')
      .enter().append("path")
        .attr("d", d3.arc()
            .innerRadius(function(d) { return y(d[0]); })
            .outerRadius(function(d) { return y(d[1]); })
            .startAngle(function(d) { return x(d.data.State); })
            .endAngle(function(d) { return x(d.data.State) + x.bandwidth(); })
            .padAngle(0.04)
            .padRadius(innerRadius));

但是，它没有用。出于某种原因，所发生的一切似乎都是灰色的。我看不到任何颜色编码的段 ( z(d.key))。我不确定为什么会这样，因为我相信我的 z-index 是正确的，我首先添加了最远的层（灰色），最后添加了最前面的层。

问题

我的背景色段实现有什么问题，我应该如何调整它？

注意：我只是简单地复制了上面的块（数据和代码相同）。我只是做了innerRadius更小的并删除了 y 轴“刻度”同心圆。

标签： javascriptd3.js