Question

我是angularjs的新手，我做了一个饼图，我如何为饼图中的每个组件自定义颜色我使用这个但是这个问题

  color = d3.scale.ordinal().domain(['Successful', 'Unsuccessful','Best One', 'Moderate'])
             .range(['#1ea6e0', '#fbb111','#eb4626', '#c568e4']);

方法在饼图中仅在项目上应用第一种颜色时，即使该项目是最后一种颜色。我怎么能做到这一点，如果有一个组件及其在.domain中的定义，那么填充的颜色应该应用于rang中的最后一个，即颜色应该与组件匹配，颜色位置在域和范围数组中。有人可以指导我吗？

Answer 1

试试这个，你会看到它：

buildChart('#chart', [
    {"label":"One", "value":1}, 
    {"label":"Two", "value":2}, 
    {"label":"Three", "value":3},
    {"label":"Four", "value":4},
    {"label":"Five", "value":1},
    {"label":"Six", "value":2},
    {"label":"Seven", "value":3},
    {"label":"Eight", "value":4},
    {"label":"Nine", "value":1},
    {"label":"Ten", "value":2}
]);

每个"value"必须属于4个类别['Successful', 'Unsuccessful','Best One', 'Moderate']，然后按类别

进行分组

饼图布局将数据转换为弧形（饼图切片）和 sort comparator指定弧的排序方式他们的角度。默认情况下，弧按降序值按值排序顺序，所以最大值将具有整体起始角度（零默认情况下）。基本上，排序决定了它的顺序从起始角度开始设置角度。

要禁用此用途：.sort（null）

将您的代码更改为：

var pie = d3.layout.pie()
.value(function(d) { return d.value; })
 .sort(null);

这是工作代码：https://jsfiddle.net/bqp6hdfr/

如何使用D3.js为饼图设置自定义颜色？

1 个答案: