Question

我将弧分成10个相同的值数据，

我想以不同的颜色着色。

我认为sgroup.selectAll（“。arc”）将一次通过1个弧并用“＃123”填充，我可以创建一个函数来返回我想要的颜色数组吗？

我该怎么做？

var data = [10,10,10,10,10,10,10,10,10];
var width = 1000;
var height = 1000;



var canvas = d3.select("body")
               .append("svg")
               .attr("height", height)
               .attr("width", width);

var colorScale = d3.scale.category10()
              .range(["red", "blue", "orange","red", "blue", "orange","red", "blue", "orange","red"])
              .domain([0,12]);

var group = canvas.append("g")
                  .attr("transform", "translate(500,500)");

// arc radius
var radius = 300;
var p = Math.PI *2; //full circle

var arc = d3.svg.arc()
            .innerRadius(radius-100)
            .outerRadius(radius);

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

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

arcs.append("path")
    .attr("d", arc);

group.selectAll(".arc")
     .attr("fill", "#123");

http://jsfiddle.net/HBPM4/

如何使用相同数据制作不同颜色的圆弧？

0 个答案: