Изменение размера легенды в D3 - PullRequest
Новая
       11

Изменение размера легенды в D3

0 голосов
/ 08 декабря 2018

В настоящее время у меня есть svg, в котором я создаю легенду для картограммы, и я написал следующий код, чтобы добавить легенду для одного набора данных, включающего мою карту: 

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 наборов.Я вполне уверен, что мое понимание того, как происходит обновление, - вот что здесь, как я выглядел здесь: Динамически создавайте легенду в d3 , и я все еще не уверен, решит ли это мою проблему, когда яЯ изменяю не только выходной диапазон цветов, но и домен, так как я полностью меняю наборы данных.

...