обновления D3.js с переходом

Question

Я использую следующий код для обновления штриха-диаграммы, созданную с d3v4:

d3.select("button.add") 
     .on("click", function(){ 
      dataset.push(Math.floor(Math.random() * 30) + 5); 
      xScale.domain(d3.range(dataset.length)) 
        .rangeRound([0, w]) 
        .padding(0.2); 
      yScale.domain([0, d3.max(dataset)]); 
      var bars = svg.selectAll("rect") 
          .data(dataset); 

      bars.enter() 
       .append("rect") 
       .attr("class", "bar") 
       .attr("x", w) 
       .attr("y", function(d){return yScale(d);}) 
       .attr("width", xScale.bandwidth()) 
       .attr("height", function(d){return h - yScale(d)}) 
       .attr("fill", function(d){ 
        return 'rgb('+d*3 + ',' + d*6 + ',' + d*9 + ')'; 
       }); 

      bars.transition() 
       .delay(function(d, i){ 
        return(i*1500)/dataset.length; 
       }) 
       .duration(500) 
       .ease(d3.easeLinear) 
       .attr("x", function(d, i){ return xScale(i);}) 
       .attr("y", function(d) {return yScale(d);}) 
       .attr("width", xScale.bandwidth()) 
       .attr("height", function(d) {return h - yScale(d);}); 
     }); 

Хотя добавлен данные и также создается Rect элементов, переход не происходит для последнего добавленного элемента в массиве. Это происходит только при добавлении следующего элемента и перехода для этого элемента не происходит.

Может ли кто-нибудь указать какие-либо намеки на то, что может пойти не так?

Заранее спасибо ..

Answer 1

Поскольку это D3 v4, вам придется merge на выбор.

Каждый раз, когда вы нажимаете одно новое значение в своем массиве данных, ваш выбор «Ввод» имеет один элемент. Однако переход для этого нового элемента не происходит, потому что вы вызываете переход с использованием bars, и, если вы не выбрали merge, то bars не содержит «ввод».

Итак, ваши «Enter» + «обновление» выборы должны быть:

bars.enter()// <-- this is just the "enter" selection 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", w) 
    .attr("y", function(d){return yScale(d);}) 
    .attr("width", xScale.bandwidth()) 
    .attr("height", function(d){return h - yScale(d)}) 
    .attr("fill", function(d){ 
     return 'rgb('+d*3 + ',' + d*6 + ',' + d*9 + ')'; 
     }) 
    .merge(bars)// <-- merge the selections: from now on, "enter" + "update" 
    .transition() 
    .delay(function(d, i){ 
     return(i*1500)/dataset.length; 
    }) 
    .duration(500) 
    .ease(d3.easeLinear) 
    .attr("x", function(d, i){ return xScale(i);}) 
    .attr("y", function(d) {return yScale(d);}) 
    .attr("width", xScale.bandwidth()) 
    .attr("height", function(d) {return h - yScale(d);}); 

Я знаю, что это «странно», но если вы задумаетесь об этом, старый D3 v3 способ проблема с выбором обновлений неверна, а не этот новый способ v4. В конце концов, bars не содержит выбор «ввести».

По словам Майка Босток:

D3 2,0 внес изменения для решения [...] дублирование: добавление к выбору ввести теперь будет копировать входящие элементы в выборе обновления. Таким образом, любые операции, применяемые к выбору обновлений после добавления к выбору ввода, будут применяться как к элементам ввода, так и к обновлению, и дублировать код можно было бы устранить [...] Это сделало удобство использования хуже. D3 4.0 удаляет магию enter.append.

(источник: https://medium.com/@mbostock/what-makes-software-good-943557f8a488#.293tkrlfo, курсив мой)