javascript - D3 Error: NotFoundError: Node was not found -

i trying dynamic capability of d3 , have followed example given in http://mbostock.github.io/d3/tutorial/bar-2.html working fine when add code x-axis , y-axis getting "notfounderror: node not found" error redraw() function.

without code axis draw, working fine otherwise getting "notfounderror: node not found" error redraw() function.

let me know issue , how resolve it. -- thanks

//data set var t = 17;  var data = [              {"time": 1, "value": 56, "color": "green"},              {"time": 2, "value": 53, "color": "green"},              {"time": 3, "value": 58, "color": "green"},              {"time": 4, "value": 58, "color": "green"},              {"time": 5, "value": 56, "color": "green"},              {"time": 6, "value": 53, "color": "green"},              {"time": 7, "value": 58, "color": "red"},              {"time": 8, "value": 58, "color": "red"},              {"time": 9, "value": 56, "color": "green"},              {"time": 10, "value": 53, "color": "green"},              {"time": 11, "value": 58, "color": "green"},              {"time": 12, "value": 58, "color": "green"},              {"time": 13, "value": 56, "color": "orange"},              {"time": 14, "value": 53, "color": "green"},              {"time": 15, "value": 58, "color": "orange"},              {"time": 16, "value": 58, "color": "green"}         ];  var minval = 0,     maxval = 100,      sumval = 0,      sampsize = 30;  var max = 4, min = 0;  //var label_array = new array(); var    val_array = new array(),     val_array_sum = new array(),     data_array = new array(),     val_array_stackedbar = new array();  sampsize = data.length;  function next() {     return {       time: ++t,       value: 60,       color: "green"     };  }   setinterval(function() {     data.shift();    data.push(next());      redraw();   }, 1500);              var width = 300, height = 300, height2 = 5;             var margin = {                     top : 30,                     right : 10,                     bottom : 40,                     left : 60             }, width = width - margin.left - margin.right, height = height             - margin.top - margin.bottom;  //            create graph object             var vis = d3.select("#stackedbar-chart3")             .append("svg:svg")                        .attr("class", "metrics-container3")             .attr("width", width + margin.left + margin.right)             .attr("height", height + margin.top + margin.bottom); //            .append("g").attr( //                                    "transform", //                                    "translate(" + margin.left + "," //                                    + margin.top + ")");               var y = d3.scale.linear().domain([0, maxval]).range([height, 0]);              var x = d3.scale.linear().domain([0, sampsize+1]).range([0, width]);              var y2 = d3.scale.linear().domain([0, maxval]).range([0, height]);              var yaxis = d3.svg.axis().scale(y).orient("left")             .ticks(5);              var xaxis = d3.svg.axis().scale(x).orient("bottom")             .ticks(5);   //                add first data-series                 var bars = vis.selectall("rect")                 .data(data)                 .enter().append("svg:rect")                 .attr("fill", function(d) { return d.color; } )                 .attr("x", function(d, i) { return x(i+1); })                 .attr("y", function(d, i) { return height - y2(d.value); }    )                 .attr("width", 5)                 .attr("height", function(d, i) { return y2(d.value); }); 

now adding axises

//            add x-axis , y-axis                 vis.append("g").attr("class", "axis").call(yaxis);                  vis.append("g").attr("class", "axis").attr("transform",                         "translate(0," + height + ")").call(xaxis);  //            add axes labels                 vis.append("text").attr("class", "axis-label").attr(                         "text-anchor", "end").attr("x", 20).attr("y",                                 height + 34).text('time'); 

redraw function used make chart dynamic

    function redraw() {          var bars = vis.selectall("rect")         .data(data, function(d) { return d.time; });          bars.enter().insert("rect", "line")         .attr("fill", function(d) { return d.color; } )         .attr("x", function(d, i) { return x(i+1); })         .attr("y", function(d, i) { return height - y2(d.value); }    )         .attr("width", 5)         .attr("height", function(d, i) { return y2(d.value); })          .transition()            .duration(1000)            .attr("x", function(d, i) { return x(i) - .5; });         bars.transition()            .duration(1000)            .attr("x", function(d, i) { return x(i) - .5; });         bars.exit().transition()            .duration(1000)            .attr("x", function(d, i) { return x(i - 1) - .5; })            .remove();      } 

your code not working because line used insert new bars isn't there anymore. is, code

bars.enter().insert("rect", "line") 

isn't working because there no line element. can fix appending new bars. modified jsfiddle here.