d3-有可能在差異圖表中添加畫筆事件嗎？

Question

這是我正在嘗試的圖表。

我要添加brush事件以及像本圖表中所示的放大和縮小。

這里的代碼，我還在想要繪制刷事件。

這是我第一次引用此網站 。

任何幫助對我來說都是非常有用的。

提前致謝。

編輯：

我幾乎設法做到了。

現在我在生產線上遇到了問題。

當您在小提琴中過濾圖表時，您可以看到它。

上面和下面的類是固定的，在發生畫筆事件時不會更改。

有人幫我嗎？

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