d3.js-如何设置饼图的风格

Question

我有以下饼图：

var data = [12,44,44];

var width = 300,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

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

var piedata = pie(data);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    
var path = svg.selectAll("path")
    .data(piedata)
    .enter().append("path")
    .attr("d", arc);

svg.selectAll("text").data(piedata)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cx = Math.cos(a) * (radius - 75);
        return d.x = Math.cos(a) * (radius - 30);
    })
    .attr("y", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cy = Math.sin(a) * (radius - 75);
        return d.y = Math.sin(a) * (radius - 30);
    })
    .text(function(d) { return d.value + '%'; });

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 12px sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

图表数据通过数组传递，但是如何通过数组传递聊天所用的颜色？

这是我的实际数组：

var data = [12,44,44];

但是我想传递这样的颜色：

var data = [
  {
    color: 'red',
    value: 12
  },
  {
    color: 'blue',
    value: 44
  },
  {
    color: 'green',
    value: 44
  }
];

如何实现我的代码以实现以下结果？

Answer 1

给出您问题中的数据结构...

var data = [
  {
    color: 'red',
    value: 12
  },
  {
    color: 'blue',
    value: 44
  },
  {
    color: 'green',
    value: 44
  }
];

...首先，您必须告诉饼图生成器正确的属性：

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

完成后，这是重要的部分：使用fill属性设置路径的color，饼生成器将其放置在data对象下：

.style("fill", function(d) {
    return d.data.color
})

这是您所做的更改的代码：

var data = [{
    color: 'red',
    value: 12
  },
  {
    color: 'blue',
    value: 44
  },
  {
    color: 'green',
    value: 44
  }
];

var width = 300,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

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

var piedata = pie(data);

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

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

var path = svg.selectAll("path")
  .data(piedata)
  .enter().append("path")
  .style("fill", function(d) {
    return d.data.color
  })
  .attr("d", arc);

svg.selectAll("text").data(piedata)
  .enter()
  .append("text")
  .attr("text-anchor", "middle")
  .attr("x", function(d) {
    var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
    d.cx = Math.cos(a) * (radius - 75);
    return d.x = Math.cos(a) * (radius - 30);
  })
  .attr("y", function(d) {
    var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
    d.cy = Math.sin(a) * (radius - 75);
    return d.y = Math.sin(a) * (radius - 30);
  })
  .text(function(d) {
    return d.value + '%';
  });

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 12px sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

尝试一下。我想它会给你答案。

var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
                                   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(function(d){ return colorScale(d.fruitType); });

或者您可以直接给

var colorScale = d3.scale.ordinal().range([/*array of hex values */]);

pie.colors(colorScale);