根据笔刷范围更新圆环图弧

Question

I'm using a D3 brush to update the arcs of a donut chart , but the update is occurring only after I release the brush. I know that D3 is capable of brush-based continuous updating as Mike has done in this example ; what part of that code have I missed in my adaptation?

Here's the function that I currently use to do the updating:

function brushended() {
  path.select('.donutPath')
    .data(pie([brush.extent()[1],100 - brush.extent()[1]]))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);
  }

Answer 1

The event you need to listen to is .on("brush",... , like:

var brush = d3.svg.brush()
    .x(x)
    .extent([0,40])
    .on("brush", brushended);

You should change the name of the function to better reflect the situation, but this alone will make it work.

FIDDLE with the listener changes, but also with changes to the way the update selection was being handled.