javascript - D3 Update bar chart -

so i'm relatively new d3, have been trouble shooting issue few days, no luck. wondering if i'm making newbie mistake.

i'm attempting create graph represents volume vs. time, , allow user update graph different date range.

function updatevolumegraph(data, div) {  //get data again data.foreach(function(d) {     d.starttime = new date(d.starttime);     d.totalvolume = d.totalvolume; });  //scale range of data again  x.domain(d3.extent(data, function(d) { return d.starttime;})); y.domain([0, d3.max(data, function(d) { return d.totalvolume; })]);  //select section want apply our changes var graphelement = d3.select(div).transition();  var bars = graphelement.selectall(".bar").data(data); <<< undefined  //add 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 x axis         .duration(750)         .call(xaxisvolume);     svg.select(".y.axis") // change y axis         .duration(750)         .call(yaxisvolume); }; 

my issue comes @ place have tagged "undefined". graphelement.selectall(".bars") returns array of "rects" .data(data) call undefined.

any advice offer appreciated!

the issue having setting graphelement return value of call transition method.

var graphelement = d3.select(div).transition();  var bars = graphelement.selectall(".bar").data(data); 

instead of chaining these methods, try calling separate call after setting graphelement variable.

var graphelement = d3.select(div); graphelement.transition(); var bars = graphelement.selectall(".bar").data(data);