d3 brush partially updating axis not circles

Question

I have prepared a bubble chart , which you can zoom into using the brush in ther grey area below the scale.Here is the fiddle. The code below updates the graph . It is updating the ruler but not graph. Can any one point out why?

function brushmove(){
            x_axis.domain(brush.empty() ? x_axis.domain() : brush.extent());
       svg.select('.ruler').call(x_axis_ruler);


      blue_circle.selectAll('circle').data(dataset)
      .attr('cx', function (d, i) {
            return x_axis(d.waiting_to_be_processed_time);
        })


    }

Answer 1

I dont know why but you should not be using the variable blue_circle to update the width .

Instead you should be replacing the code with this:

function brushmove(){
            x_axis.domain(brush.empty() ? x_axis.domain() : brush.extent());
       svg.select('.ruler').call(x_axis_ruler);


      d3.select('.processing_circles').selectAll('circle').data(dataset).attr('cx', function (d, i) {
            return x_axis(d.waiting_to_be_processed_time);})

    }

I have left the reason for a more experienced user to checkout.