d3.js使用brush.clear(）;It’我不管用

d3.js using brush.clear() doesn't work for me

本文关键字：It 不管 使用 js brush clear d3      更新时间：2023-09-26

在一个对象中，我存储了用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()的文档效率不高。

从文档中，

请注意，这不会自动重新绘制笔刷或调度任何事件。若要重新绘制笔刷，请在选择或过渡要调度事件，请使用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>

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

第二行是重新绘制笔刷。

brush.clear()仅重置范围。您需要再次调用brush来重新绘制笔刷。brush.extend的文档中有一些关于这方面的详细信息。

您可能还需要调用brush.event()来确保您的侦听器被解雇。在d3.v3中，它看起来是这样的：

this.brushArea.call( this.brush.clear());
this.brush.event(this.brushArea);
相关文章：