Question

我这里有一个圆环图。

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（数据）的结果：

[
   {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附加矩形和文字：

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，以便更轻松地管理变换。

更新了小提琴：http://jsfiddle.net/Qh9X5/9911/

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

1 个答案: