在 d3js 中为甜甜圈的每个路径固定颜色答案

【问题标题】：Fixing color to each path for donut in d3js在 d3js 中为甜甜圈的每个路径固定颜色
【发布时间】：2014-11-10 20:52:06
【问题描述】：

我正在用 d3js 画一个甜甜圈。我在数组数据集中有三个值（例如，totalpop、ruralpop、urbanpop-----> [1000,2000,3000]）。我希望这些值用甜甜圈中的特定颜色填充（例如，totalpop - red color,ruralpop - 蓝色，城市流行橙色）

下面是我在代码中尝试过的

var color = d3.scale.ordinal()
.domain([totalpop,ruralpop,urbanpop])
.range(["red","blue","orange"]); 

var dataset = [parseInt(totalpop),parseInt(ruralpop),parseInt(urbanpop)];


var arc = d3.svg.arc()
.innerRadius(r-20)
.outerRadius(r);

var pie = d3.layout.pie()
.value(function(dataset){return dataset;});

颜色附加的主要代码

var arcs = groupx.selectAll(".arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class","arc");

这里我给路径添加了颜色

arcs.append("path")
.attr("d",arc)
.attr("fill",function(dataset){return color(dataset.data)});

【问题讨论】：

你能为它创建一个小提琴吗？ “totalpop”、“ruralpop”和“urbanpop”的值是多少？
我已经解决了我已经发布了答案感谢您的回复@huan fengspan>

标签： d3.js

【解决方案1】：

我找到了解决方案，就这样吧，而不是在最后添加，我在创建路径时添加了颜色

var color = d3.scale.ordinal()                               
                    .domain(parseInt(totalwater),parseInt(ruralwater),parseInt(urbanwater))
                                                .range(["red","blue","orange"]);   
var arcs = groupx.selectAll(".arc")
                     .data(pie(dataset))
                     .enter()
                     .append("g")
                     .attr("class","arc")
                    .attr("fill",function(dataset,i){return color(i)})
arcs.append("path")
.attr("d",arc)

【讨论】：