Question

如何在图表中添加图例（see fiddle）？我尝试按如下方式定义图例，但随后图表消失（参见this fiddle）。

var height = 900, width = 900;
var gridSize = Math.floor(width / 42);
var legendElementWidth = gridSize*2;

var legend = svg.selectAll(".legend")
              .data([0].concat(colorScaleDomain.quantiles()), function(d) { return d; });

legend.enter().append("g")
  .attr("class", "legend");

legend.append("rect")
.attr("x", height)
.attr("y", function(d, i) { return legendElementWidth * (i-0.5); })
.attr("width", gridSize / 2 )
.attr("height", legendElementWidth)
.style("fill", function(d, i) { return colors[i]; });

legend.append("text")
.attr("class", "mono")
.text(function(d) { return "≥ " + Math.round(d) + "%"; })
.attr("x", (height) + gridSize)
.attr("y", function(d, i) { return legendElementWidth*i; } );

legend.exit().remove();

Answer 1

这是问题列表：

没有colorScaleDomain.quantiles()。它应该是colorScale.quantiles()。
元素的顺序在SVG中非常重要，SVG没有z索引。所以，你的传说......
```
legend.enter().append("g")
    .attr("class", "legend");
```

...应该在图表的绘图代码之后。但由于第三个问题，这个步骤甚至可以被忽略：

你的传说在 SVG之外。我纠正了这个：

var svg = d3.select("body").append("svg")
    .attr("width", diameter + 200)//adding some space in the SVG

传说中的一些神奇数字代码。相应地改变它们（在大多数情况下，幻数不是一个好习惯）。

这是您更新的小提琴：https://jsfiddle.net/hsq05oq9/

如何在图表中添加图例？

1 个答案: