d3 - Is there any possibilities of adding brush event to difference chart?

问题

This is the chart I'm trying out.

I want to add the brush event and zoom-in and zoom-out like we have in this chart.

Here's the code which I'm still trying to plot a brush event.

This is the first time I'm doing this referring to this site.

Any help will be very much useful for me.

Thanks in advance.

EDIT :

I almost managed to do it.

Now I have some problem with the line.

When you filter the chart in the fiddle you can see it.

Above and below classes are fixed and it's not getting changed on the brush event.

Someone help me out?

回答1:

Here is the FIDDLE. And here is the key code piece:

function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("#clip-below>path").attr("d", area.y0(height));
    focus.select("#clip-above>path").attr("d", area.y0(0));
    focus.select(".area.above").attr("d", area.y0(function(d) { return y(d["San Francisco"]); }));
    focus.select(".area.below").attr("d", area);    
    focus.select("path.line").attr("d", line(data));
    focus.select(".x.axis").call(xAxis);
}

来源：https://stackoverflow.com/questions/23154094/d3-is-there-any-possibilities-of-adding-brush-event-to-difference-chart