javascript - 根据数据点的数量更改 d3 可重复使用的圆环图中的颜色范围

Question

使用这个可重复使用的图表作为基础:http://bl.ocks.org/nnattawat/9368297

我正在尝试找到一种方法来根据弧的数量(大小)更改颜色范围集，而不必重写主 donut ()。

例如，一个 donut 的 getData 大小为 2(颜色为绿色和灰色)，另一个 donut 的 getData 大小为 3(现在删除灰色并将颜色更改为绿色、红色和黄色)。

我似乎无法从 donut() 中删除颜色，所以我试图找到一种方法将颜色与特定数据点相关联，但我无法使用此模板来解决这个问题。

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

我有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();

Answer 1

圆弧的填充由这一行的 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 变量从函数更改为数组。该数组将根据 dataSize 而变化，因此 switch 语句在这里非常有用。替换颜色定义:

var color;

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

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

Everything in one JSFiddle.

有两个数据点:

具有三个数据点:

---

编辑:由于您在同一页面上使用了多个图表和一组数据，因此您需要将整个 block 移动到内部 Object.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;

New complete JSFiddle.