Question

我需要不同颜色的3图表，以黑色显示。但是休息部分颜色对于三个是相同的。如何解决这个问题。

代码在这里：

 var dataset = {
 apples: [33, 70],
 oranges: [12, 80],
lemons: [20, 90],
};

var width = 660,
height = 500,
 cwidth = 35;
var color = d3.scale.ordinal().range(["#000000", "#f5f5f5"]);//Colors 

var pie = d3.layout.pie()
.sort(null);

var arc = d3.svg.arc();

 var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 3 + "," + height / 3 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.style("fill", function(d) { return color(d.pie); })//Returning color from here
.enter().append("path")
 .attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(4+cwidth*j).outerRadius(cwidth* (j+1))(d); });

Answer 1

我已将您的代码转换为此jsbin。它有很多问题，这些都在代码中注释。我还整理了一些难以阅读的代码。

您获得黑色圆圈的原因是因为您试图在此行style("fill", function(d) { return color(d.pie); })中获取具有未定义属性的颜色。您在var color = d3.scale.ordinal().range(["#000000", "#f5f5f5"]);中也只定义了2种颜色，因此无法获得三种颜色。

Answer 2

这将有效

  var i=0;
  var RamdomColor=function(col){
  var colorsArray = ['#f5f5f5', 'red', 'blue', 'green'];
   if(col == 0){
     ++i
    return colorsArray[i];
   }
   else
 return colorsArray[0];

 }

  var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

  var path = gs.selectAll("path")
        .data(function(d,i) { return pie(d); })
        .enter().append("path")
        .attr("fill", function(d, i) { return RamdomColor(i);})
        .attr("transform", "translate(100,100) rotate(270 50 50)") 
        .attr("d", function(d, i,j) { return arc.innerRadius(4+cwidth*j).outerRadius(cwidth* (j+1))(d); });

需要不同颜色的图表将变为黑色

2 个答案: