Нужно ли мне вкладывать свои данные, чтобы иметь ключ (график многократного использования d3 csv)?

Question

Кажется, у меня есть некоторые ключевые проблемы с графиком входа, обновления и выхода. У моей функции data() возникают проблемы с отслеживанием вставки и удаления данных, а масштабирование, удаление и добавление происходит неправильно.

Я сделал Plunkr.

Я пытаюсь обновить график для отображения различных данных по годам. Дивы года можно нажать.

Нужно ли мне вкладывать свои данные? Есть ли лучшее решение?

В качестве альтернативы, лучше всего создать отдельную функцию update() или перезапустить функцию chartdraw()?

Прошу прощения за джанки код. Все еще выясняю это:)

Answer 1

Не похоже, что у вас есть обновление для barsBars или barsText. Изменения активируются только при входе и выходе.

Попробуйте добавить это между строками 'barsBars = svg.selectAll...' и 'barsBars.enter()...':

barsBars
  .transition()
  .attr("x", function(d, i) {   
    return xScale(d.funded_month) + marginleft;
  })
  .attr("y", function(d) {
    return h - yScale(d.value);
  })
  .attr("width",  barwidth - .2)
  .attr("height", function(d) {
    return yScale(d.value);
  })
  .attr("fill", function(d) {
  var picker = d.value / 138579040 + 100;
  picker = parseInt(picker)
  barColor = "rgb(40, 80, " + picker + ")";
  return barColor;
});

И это между строками 'barsText = svg.selectAll...' и 'barsText.enter()...':

barsText
  .transition()
  .attr("x", function(d, i) {
    return xScale(d.funded_month) + marginleft + xAdjust;
//return xScale(i) + barwidth / 2;
   })
   .attr("y", function(d) {
     return h - yScale(d.value) - 2;
});

Строки.transition() не обязательны, но они меняют способ обновления графа. Попробуйте прокомментировать их, чтобы увидеть разницу.

Смотрите примеры общих шаблонов обновления Майка Бостока:

http://bl.ocks.org/mbostock/3808234