Javascript D3js-将数据绑定到多个圆环图

长期潜伏者，第一次发布

我创建了一个示例来说明我在下面讨论的内容

我可以使用从数据库返回的数据创建一个圆环图。这很好，但我真的需要能够创建4个甜甜圈图表，显示每个站点的填充百分比。正如您在小提琴中看到的，当我创建前景弧时，如下所示：

    // Foreground arc
    svg.selectAll("svg")
    svg.append("path")
      .datum({endAngle: prctFilled * twoPi})
      .attr("d", arc)
      .style("fill", "orange");

我只从json数据集中获取最后一个值，它显示在所有4个圆环图中

我的第一个想法是创建一个prctFilled数组，然后遍历前景弧中的值。大概是这样的：

data.forEach(function (d) {
    prctFilled.push(1 - ((d.capacity - d.filled) / d.capacity));

});

当我检查控制台时，我可以看到值在那里[0.09999999998,0.25,0.5,0.75]，但我不确定如何在我的前景弧的代码中迭代它们。老实说，我甚至不知道这是不是我应该做的。我已经为此绞尽脑汁好几天了，我记不清我试过的所有东西，但我可以给你一个我看过的几个例子的列表（不幸的是，我的声誉不到10，所以我不能发布超过2个链接）

来自迈克·博斯托克：3个小圆圈教程，甜甜圈倍数，馅饼倍数

-这似乎与我想做的非常相似

我还研究了以下问题：

（使用并插入号码）：

15264575

21733536

16894068-有一次我收到了NaN错误，但我没有能够为了这篇文章的目的复制这些错误

---

在这一点上，我很困惑，答案可能就在我面前，而我就是看不到。非常令人沮丧。非常感谢您的帮助。我真的很挣扎。我以前从未发布过，所以如果需要更多信息，我很乐意提供。谢谢大家!

如果您想要4个图表，您应该使用4个数据集，将json拆分为

dataHmi

，

dataHmi

等。然后确定如何构建一个油炸圈饼图表，这将有助于如果您想要4个图表，您应该使用4个数据集，将json拆分为

dataHmi

，

datapaper

等。然后找出如何构建一个油炸圈饼图，这应该有帮助

如果你想要4个图表，你应该使用4个数据集，将json拆分成

dataHmi

，

datapaper

等。然后找出如何构建一个油炸圈饼图，这应该有帮助

如果你想要4个图表，你应该使用4个数据集，将json拆分为

dataHmi

，

dataHmi

等。然后研究如何构建一个圆环图，这将有助于解决我的问题

这是工作小提琴：

我所做的

基本上，这就是我的前景。在代码的顶部，我没有在弧生成器中指定.endAngle参数

var arc = d3.svg.arc()
    .innerRadius(22.5)
    .outerRadius(30)
    .startAngle(0);

那是因为我要在我的背景和前景路径中做这件事。因此，由于背景是一个完整的圆，它的.端角是2*Pi

// Background arc
svg.selectAll("svg")
svg.append("path")
    .datum({endAngle: twoPi})
    .style("fill", "#e6e6e6")
    .attr("d", arc);

我知道我必须在前景路径中执行相同的操作，但我无法确定需要在何处指定.endAngle。为了增加我的困惑，我认为我需要迭代我的代码并计算我的“填充百分比”，然后在前景路径中使用该结果。我确实需要这样做，但是我的代码放错了位置。我最初将其放在代码的顶部，如下所示：

data.forEach(function (d) {
  prctFilled = (1 - ((d.capacity - d.filled) / d.capacity));
});

这就是为什么我的JSON中的最后一个值被应用于所有4个图表的原因！我需要杀死那个密码。我还需要杀人

.datum({endAngle: twoPi * prctFilled})

在我的前景路径中，而是包含一个函数，该函数遍历我的数据集并返回“填充百分比”，作为前景路径中的属性（记住将其乘以2Pi）。像这样：

// Foreground arc
svg.selectAll("svg")
svg.append("path")
    .attr("d", arc.endAngle(function (d) {return (twoPi * (1 - ((d.capacity - d.filled) / d.capacity)));}))
    .style("fill", "orange");

一旦我这么做了，我就得到了我想要的答案

以下是代码（SAN数据集）：

再一次，这里是工作小提琴：

注意：如果有人想知道，我需要得到每个站点的“填充百分比”结果。如果我没有从1中减去（（d.capacity-d.filled）/d.capacity），我会得到“剩余百分比”，而不是“填充百分比”。这对大多数人来说可能是显而易见的，但我想我还是放弃吧

谢谢你的回复。我希望这能帮助那些正在挣扎的人。

解决了我的问题

这是工作小提琴：

我所做的

基本上，这就是我的前景。在代码的顶部，我没有在弧生成器中指定.endAngle参数

var arc = d3.svg.arc()
    .innerRadius(22.5)
    .outerRadius(30)
    .startAngle(0);

那是因为我要在我的背景和前景路径中做这件事。因此，由于背景是一个完整的圆，它的.端角是2*Pi

// Background arc
svg.selectAll("svg")
svg.append("path")
    .datum({endAngle: twoPi})
    .style("fill", "#e6e6e6")
    .attr("d", arc);

我知道我必须在前景路径中执行相同的操作，但我无法确定需要在何处指定.endAngle。为了增加我的困惑，我认为我需要迭代我的代码并计算我的“填充百分比”，然后在前景路径中使用该结果。我确实需要这样做，但是我的代码放错了位置。我最初将其放在代码的顶部，如下所示：

data.forEach(function (d) {
  prctFilled = (1 - ((d.capacity - d.filled) / d.capacity));
});

这就是为什么我的JSON中的最后一个值被应用于所有4个图表的原因！我需要杀死那个密码。我还需要杀人

.datum({endAngle: twoPi * prctFilled})

在我的前景路径中，而是包含一个函数，该函数遍历我的数据集并返回“填充百分比”，作为前景路径中的属性（记住将其乘以2Pi）。像这样：

// Foreground arc
svg.selectAll("svg")
svg.append("path")
    .attr("d", arc.endAngle(function (d) {return (twoPi * (1 - ((d.capacity - d.filled) / d.capacity)));}))
    .style("fill", "orange");

一旦我这么做了，我就得到了我想要的答案

以下是代码（SAN数据集）：

再一次，这里是工作小提琴：

注意：如果有人想知道，我需要得到每个站点的“填充百分比”结果。如果我没有从1中减去（（d.capacity-d.filled）/d.capacity），我会得到“剩余百分比”，而不是“填充百分比”。这对大多数人来说可能是显而易见的，但我相信你