javascript - 如何在 d3 js 圆环图中使用不同的颜色和图例？

Question

我这里有一个圆环图。

http://jsfiddle.net/Qh9X5/9902/

var dataset = {
  apples: [53245],
  oranges: [53245],
  lemons: [53245],
  pears: [53245],
  pineapples: [53245],
};

var width = 500,
    height = 500,
    cwidth = 40;

var color = d3.scale.category20();

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 / 2 + "," + height / 2 + ")");

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

我想为每个戒指添加我自己的颜色。我尝试过多种设置。但不知道如何添加独特的颜色。

有人可以告诉我如何向图表添加独特的颜色和图例吗？

谢谢

Answer 1

要添加图例，过程相当简单。

首先，我们可以附加一个 g 来保存图例:

var legend = svg.append('g');

D3 selectAll 和append 语句适用于数组。由于您有一个对象而不是数组，我们可以使用以下命令将您的条目转换为数组:d3.entries(data):

原始形式:

{
   apples:[n],
   oranges:[m],
   ...
}

以及 d3.entires(data) 的结果:

[
   {key: "apples", value:[ [n] ]},
   {key: "oranges", value: [ [m] ]}
   ...
]

这样我们就可以为数组中需要的每个元素附加一个 g 元素:

var entries = legend.selectAll('g')
 .data(d3.entries(dataset))
 .enter()
 .append('g')
 .attr('transform',function(d,i) { console.log(d);
    return 'translate(30,'+(30+i*30)+')';
 });

请注意，每个 g 的变换略有不同。这样，矩形和文本不需要唯一的变换，它已经用 g 完成了。

然后我们可以将矩形和文本附加到选择条目中的每个g:

entries.append('rect')
  .attr('fill',function(d,i) { return color(i); })
  .attr('width',20)
  .attr('height',20)
  .attr('x',20)

entries.append('text')
  .text(function(d) { return d.key; })
  .attr('x',50)
  .attr('y',10)

注意:您的 svg 变量表示包含附加 g 的选择，该选择具有适合圆环图的转换。我创建了一个新变量来保存此 g 并将图表附加到该变量。然后，我创建了一个额外的 g(legend)，将其直接附加到 svg 中，以使转换更易于管理。

更新的 fiddle :http://jsfiddle.net/Qh9X5/9911/