Question

我正在d3js画一个甜甜圈。我在数组数据集中有三个值（例如totalpop，ruralpop，urbanpop -----＆gt; [1000,2000,3000]）。我希望这些值用甜甜圈中的特定颜色填充（例如totalpop - 红色， ruralpop - blue，urbanpop-orange）

以下是我在代码中尝试过的内容

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)});

Answer 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)

在d3js中将颜色固定到甜甜圈的每个路径

1 个答案: