d3 - 是否有可能在差异图表中添加画笔事件？

Question

This是我试用的图表。

我想添加brush事件，放大和缩小，就像我们在this图表中一样。

这里是code我仍在尝试绘制画笔事件。

这是我第一次这样做，指的是site。

任何帮助对我都非常有用。

提前致谢。

编辑：

我几乎成功了。

现在我对这条线路有些问题。

当您在小提琴中过滤图表时，您可以看到它。

上下课程是固定的，并且刷子事件没有改变。

有人帮助我吗？

Answer 1

这是FIDDLE。这是关键代码：

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);
}