javascript - 使用 brush.clear() 的 d3.js 对我不起作用

Question

我在一个对象中存储了用d3.js制作的折线图，它可以刷选区域。

当我在折线图的选定部分之外单击时，选定区域被删除。

我想删除点击外部链接的选定区域，例如。 [重置]

不幸的是，即使我从折线图对象访问画笔对象，在 brush 对象上调用 clear() 也不会删除选择。

如何从外部折线图中删除使用外部链接的画笔选择？

我创建画笔:

this.brush = d3.svg.brush()
    .x(xScale)
    .on('brushstart', function() {
        lineChart.brushStart();
    })
    .on('brushend', function() {
        lineChart.brushEnd();
    });

我创建刷牙区域:

this.brushArea = svg.append('svg:g')
    .attr('class', 'brush')
    .call(this.brush)
    .selectAll('rect')
    .attr('height', this.height);

在外部链接上，我放置了 clear() 命令:

<span onclick="javascript: lineChart.brush.clear();">[reset]</span>

它不会从折线图中删除选择。

请帮忙。

关于 brush.clear() 的文档效率不高。

Answer 1

来自docs ,

Note that this does not automatically redraw the brush or dispatch any events to listeners. To redraw the brush, call brush on a selection or transition; to dispatch events, use brush.event.

您可以通过先清除画笔然后重新绘制来实现此目的。

d3.selectAll(".brush").call(brush.clear());

这首先会清除画笔并重新绘制页面上的所有画笔。

尽管如此，我总是建议在父容器上下文中对选择执行 clear()。例如:

d3.selectAll(".brush-container .brush").call(brush.clear());

用例是当您的页面上有多个画笔时。

现在具体回答你的问题，你可以这样调用一个函数

var d3Brush = this.brush;

function clearBrush(){
  d3.selectAll("g.brush").call(d3Brush.clear());
}

然后打电话

<span onclick="javascript: clearBrush();">[reset]</span>