如何在NVD3的饼图中自定义颜色

Question

我正在尝试使用NVD3 http://nvd3.org/livecode/#codemirrorNav一个饼图.但我想改变默认颜色.我该如何改变颜色.我无法做到.

Answer 1

如果你想使用特定颜色的馅饼

chart.color(function(d){
    return d.data.color
});

然后,将您的数据组织为:

[
  {
    key: "Cumulative Return",
    values: [
      { 
        "label": "One",
        "value" : 29.765957771107,
        "color" : "#8c564b"
      } ,
      { 
        "label": "Three",
        "value" : 32.807804682612,
        "color" : "#e377c2"
      } 
    ]
  }
]

Answer 2

您可以通过将数组传递给'color()'选项来添加颜色.所以只需添加:

.color(['blue', 'green', 'yellow'])

如果要将这些颜色用于3个元素.

注意:如果您有超过3个元素,则会多次使用某些颜色.

Answer 3

要使用自己的颜色,你必须覆盖现有的颜色,我不想修改原始代码.

所以这就是我所做的.

    var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
    d3.scale.myColors = function() {
        return d3.scale.ordinal().range(myColors);
    };

    nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .showLabels(true).color(d3.scale.myColors().range());

        d3.select("#chart svg")
            .datum(data)
          .transition().duration(1200)
            .call(chart);

      return chart;
    });

我所做的只是补充 .color(d3.scale.myColors().range())

UPDATE :

查看Christopher Chiche的答案,获得完美的解决方案.

.color(['blue', 'green', 'yellow'])

希望这可以帮助.