Автор оригинала: Bryony Miles.
Точно так же, как вы думали, вы должны справиться с функцией .merge (), она снова меняется в версии D3.js версии 5.
Здесь нет кризиса, .merge () отлично работает в версии 5, но это всегда хорошо, чтобы обнять изменения!
.join () предназначен как
более удобные и запоминающиеся API для присоединения данных, не жертвуя
Существует блестящее объяснение того, как он работает, когда вы добавляете данные в один элемент Майк Босток – Нет необходимости расширяться там.
Эта статья – это быстрое расширение, чтобы показать, как вы можете добавить данные в группу, которая затем может быть применена к нескольким элементам.
В Эта статья Я объясняю процесс с функциональностью .merge ().
Хорошая новость заключается в том, что использование .join () вместо этого меньше строк кода, а также весь дополнительный потенциал для выделения элементов данных, которые являются текущими и новыми.
Итак, функция update_group в Оригинальный демоверсии :
//join
var my_group = svg.selectAll('.chart_group')
.data(data, d => d.id);
//exit and remove
my_group.exit().remove();
//enter new groups
var enter = my_group.enter()
.append("g")
.attr("class","chart_group");
//append elements to new group
enter.append("rect").attr("class","group_rect");
enter.append("text").attr("class","group_text");
enter.append("image").attr("class","group_image");
//merge
my_group = my_group.merge(enter);
становится этим в Новая демонстрация
//join
var my_group = svg.selectAll('.chart_group')
.data(data, d => d.id)
.join(function(group){
var enter = group.append("g").attr("class","chart_group");
enter.append("rect").attr("class","group_rect");
enter.append("text").attr("class","group_text");
enter.append("image").attr("class","group_image");
return enter;
});
Что может быть проще! Спасибо снова в чудо г-на Бостока.