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

完成后，这是重要的部分:使用 color 属性设置路径的 fill，饼图生成器放在 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>