Javascript 根据数据点的数量更改d3可重复使用甜甜圈图表中的颜色范围

使用此可重用图表作为基础：

我正试图找到一种方法，根据弧数（大小）更改颜色范围集，而不必重写主圆环（）

例如，一个甜甜圈getData大小将为2（具有绿色和灰色），另一个甜甜圈getData大小将为3（现在删除灰色并将颜色更改为绿色、红色和黄色）

我似乎无法从甜甜圈（）中删除颜色，因此我试图找到一种可能将颜色与特定数据点关联的方法，但我无法使用此模板来解决这一问题

编辑：指定已完成的代码更改

我有6个不同的getData函数，大致如下：

var getFirstDonutData = function () {
    var size = 2;
    var data = [firstData1, firstData2];
    var text = "";
    d3.select("#data");
    return data;
};

var getSecondDonutData = function () {
    var size = 3;
    var data = [secondData1, secondData2, secondData3];
    var text = "";
    d3.select("#data");
    return data;
};

var getThirdDonutData = function () {
    var size = 2;
    var data = [thirdData1, thirdData2];
    var text = "";
    d3.select("#data");
    return data;
};

然后是以下6个不同的选项：

var twoPointDonut = donut()
              .$el(d3.select("#twoPointDonut "))
              .data(getFirstDonutData ())
              .render();

var threePointDonut = donut()
              .$el(d3.select("#threePointDonut "))
              .data(getSecondDonutData ())
              .render();

var otherTwoPointDonut = donut()
              .$el(d3.select("#otherTwoPointDonut "))
              .data(getThirdDonutData ())
              .render();

---

圆弧的填充由此行上的

color（）

函数确定：

.style("fill", function(d) { return color(d.data.key); });

我们可以根据索引从颜色数组中选择颜色，而不是使用函数。将上述行修改为：

.style("fill", function(d, i) { return color[i]; });

现在，我们需要根据数据点的数量（数据对象中的关键点数量）更改可用颜色的列表。在

color（）

函数上方，添加：

var dataSize = Object.keys(getData()).length
var color = d3.scale.category20(); // This line was already here

最后，我们需要将

color

变量从函数更改为数组。数组将根据

数据大小

而变化，因此

开关

语句在这里非常有用。替换颜色定义：

var color;

switch (dataSize) {
  case 2:
    color = ['green' , 'gray'];
    break;
  case 3:
    color = ['green', 'red', 'yellow'];
    break;
}

当只有两个数据点时，这将为您提供绿色和灰色；当有3个数据点时，为绿色、红色和黄色。您可以为更多的数据点添加更多的

case

s

有两个数据点：

有三个数据点：

---

编辑：由于在同一页面上使用多个图表和一组数据，因此需要将整个块移动到

对象内。render（）

函数：

var dataSize = Object.keys(getData()).length;
var color;

switch (dataSize) {
  case 2:
    color = ['green' , 'gray'];
    break;
  case 3:
    color = ['green', 'red', 'yellow'];
    break;
}

然后更改

dataSize

变量以获取传入的

data

对象键的长度：

var dataSize = Object.keys(data).length;

---

谢谢，这很有道理。不过，我还有其他一些顾虑，并更新了问题。基本上，我是在创建单独的getData（）来容纳各个甜甜圈，因为数据来自特定的变量。由于main donut（）专门使用“getData”，因此我无法以当前的方式创建倍数。我尝试将数据作为另一个数组传递进来，但我猜甜甜圈无法及时看到它，无法加载它。就是这样！非常感谢。如果这有点超出范围，很抱歉，但是您知道在渲染函数中包含该信息是否有任何缺点吗？一个缺点是

颜色

数组现在的范围更窄。如果其他函数调用它，它们可能无法再看到它，因为它位于

render

函数中。我没有仔细研究代码，但我认为它是在MouseOver上调用的，因此需要解决这个问题（尽管它不会像现在这样影响功能）。此外，如果您使用除2或3之外的任何其他数量的数据点传递数据，除非您为它们添加案例，否则它将出错。您可能还需要在switch语句中设置一些安全默认值。