5

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

4

4 回答 4

10

从文档中，

请注意，这不会自动重绘画笔或将任何事件发送给侦听器。要重绘画笔，请在选择或过渡上调用画笔；调度事件，使用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>
于 2013-12-03T07:41:44.660 回答
6 
brush.clear();
svg.selectAll('.brush').call(brush);

第二行是重绘画笔。

于 2013-10-03T14:58:50.633 回答
5

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

于 2013-08-08T20:24:45.353 回答
0

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

this.brushArea.call( this.brush.clear());
this.brush.event(this.brushArea);
于 2019-11-01T01:15:41.093 回答