D3.JS Гистограмма: выравнивание столбцов при обновлении данных

Question

Я пытаюсь обновить данные на гистограмме с помощью D3.JS. У меня возникает проблема при обновлении данных, когда бары больше не выравниваются с осью x после обновления данных.

Вот ссылка на демо: http://bl.ocks.org/clhenrick/b26a7310edf204f3c209

Любые предложения будут оценены.

Answer 1

На line 239 -

bar.append("rect") 

-вы, вероятно, означало .select, не .append.

Ваш текущий код добавляет новый набор <rect> s каждый раз, когда диаграмма обновляется, а старые не выравниваются вправо.

Обратите внимание на увеличение размера выбора d3, что я бегу в Дев инструментов справа.

Когда фиксировано, это выглядит следующим образом:

Answer 2

Редактирование линии 232 - 242 в index.html так что bar не была вызвана дважды устранили проблему, а также изменение .append к .select.

Предыдущий код:

bar.data(newhistdata) 
    .transition() 
    .duration(1000) 
    .attr("transform", function(d,i) { 
     return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    }); 
bar.append("rect") 
    .attr("x", x(binmargin)) 
    .attr("width", x(binsize - 2 * binmargin)) 
    .attr("height", function(d) { return height - y(d.numFlips); }); 

Отредактировано:

bar.data(newhistdata) 
    .transition() 
    .duration(1000) 
    .attr("transform", function(d,i) { 
     return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    }) 
    .select('rect') 
    .attr('x', x(binmargin)) 
    .attr("width", x(binsize - 2 * binmargin)) 
    .attr("height", function(d) { return height - y(d.numFlips); });