d3-是否可以在差异图表中添加画笔事件? [英] d3 - Is there any possibilities of adding brush event to difference chart?

问题描述

这 是我正在尝试的图表.

This is the chart I'm trying out.

我想添加brush事件以及像 这张 图表.

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.

谢谢.

我几乎做到了.

现在我在生产线方面有问题.

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.

有人帮我吗?

推荐答案

这是 FIDDLE .这是关键代码段:

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

这篇关于d3-是否可以在差异图表中添加画笔事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！