Question

我目前有一个svg，用于在其中创建一个Choropleth贴图的图例，并且编写了以下代码，以将图例添加到涉及我的图的一个数据集中：

var legendGroups = svg.selectAll("g")
  .data(color.range().map(d => color.invertExtent(d)));
var enterGroups = legendGroups.enter()
  .append("g")
  .attr("class","legendGroup");
enterGroups.append("rect")
  .attr("y", d => x(d[0]) - 100)
  .attr("height", d => x(d[0]) - x(d[1]) + 10)
  .attr("width", 20)
  .attr("fill", d => color(d[0]));
enterGroups.append("text")
  .attr("x", 30)
  .attr("y", d => (x(d[0]) - 85))
  .attr("fill", "white")
  .text(d => format(d[1]));

，我有如下更新代码，当我想更改地图上的数据集和颜色时运行该更新代码：

var legendGroups = svg.selectAll(".legendGroup")
  .data(newColor.range().map(d => newColor.invertExtent(d)));
var enterGroups = legendGroups.enter()
  .append("g")
  .attr("class", "legendGroup");
legendGroups.selectAll("rect").remove();
legendGroups.selectAll("text").remove();
legendGroups.append("rect")
  .attr("y", d => x(d[0]) - 100)
  .attr("height", d => x(d[0]) - x(d[1]) + 10)
  .attr("width", 20)
  .attr("fill", d => newColor(d[0]));
legendGroups.append("text")
   .attr("x", 30)
   .attr("y", d => (x(d[0]) - 100) + 15)
   .attr("fill", "white")
   .text(d => format(d[1]));
legendGroups.exit().remove();

这种类型的作品，但是当我尝试使用包含不同数量色箱的新数据集更新地图时，就会出现问题。如果我从9个仓位移动到8个仓位，然后又返回到具有9个仓位的数据集，则图例输出只有8个仓位。然后，如果我从这9个合并的数据集移动到另一个9个合并的数据集，则图例再次具有9个合并。我相当确定我对更新的发生方式的理解是这里发生的事情，就像我在这里看到的：Dynamically create legend in d3一样，我仍然不确定是否能解决我的问题，因为我不仅在更改输出颜色范围，但也输出域，因为我完全交换数据集。

调整D3中的图例大小

0 个答案: