D3 Обновление гистограммы

Question

Так что я относительно новичок в D3, но мне не удалось снять эту проблему на несколько дней, не повезло. Удивление, если я делаю ошибку новичков.

Я пытаюсь создать график, который представляет объем vs. время, и позволяет пользователю обновлять график с другим диапазоном дат.

function updateVolumeGraph(data, div) { 

//Get the data again 
data.forEach(function(d) { 
    d.startTime = new Date(d.startTime); 
    d.totalVolume = d.totalVolume; 
}); 

//Scale the range of the data again 
x.domain(d3.extent(data, function(d) { return d.startTime;})); 
y.domain([0, d3.max(data, function(d) { return d.totalVolume; })]); 

//Select the section we want to apply our changes to 
var graphElement = d3.select(div).transition(); 

var bars = graphElement.selectAll(".bar").data(data); <<< Undefined 

//Add some bars 
bars.enter().append("rect") 
      .attr("class", "bar") 
       .attr("x", function(d) { return x(d.startTime); }) 
       .attr("y", function(d) { return y(d.totalVolume); }) 
       .attr("height", function(d) { return height - y(d.totalVolume); }) 
       .attr("width", barWidth); 

    svg.select(".x.axis") // change the x axis 
     .duration(750) 
     .call(xAxisVolume); 
    svg.select(".y.axis") // change the y axis 
     .duration(750) 
     .call(yAxisVolume); 
}; 

Моя проблема возникает в том месте, где я отметил его как «Неопределенный». graphElement.selectAll (". bars") возвращает массив «rects», но вызов .data (data) не определен.

Любой совет, который вы могли бы предложить, был бы очень благодарен!

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что вы устанавливаете graphElement на возвращаемое значение вашего вызова метода transition.

var graphElement = d3.select(div).transition(); 

var bars = graphElement.selectAll(".bar").data(data); 

Вместо цепочки эти методы, попробуйте вызвать его в качестве отдельного вызова после установки переменной graphElement.

var graphElement = d3.select(div); 
graphElement.transition(); 
var bars = graphElement.selectAll(".bar").data(data);