d3.js使用brush.clear（）对我不起作用

Question

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

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

我想通过点击外部链接删除所选区域。 [重置]

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

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

我创建画笔：

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开始，

请注意，这不会自动重画画笔或分发任何画笔听众的事件。要重绘画笔，请在选择项上调用画笔或过渡;要调度事件，请使用brush.event。

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

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

首先清除画笔，然后在页面上重新绘制all画笔。

尽管，我始终建议在其父容器的上下文中对选择执行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>

Answer 2

brush.clear();
svg.selectAll('.brush').call(brush);

第二行是重新绘制画笔。

Answer 3

brush.clear()仅重置范围。您需要再次调用brush以重画画笔。 brush.extent的文档中对此有一些详细信息。

Answer 4

您可能还想打电话给brush.event()以确保您的听众被解雇了。在d3.v3中，它看起来像这样：

this.brushArea.call( this.brush.clear());
this.brush.event(this.brushArea);