Question

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

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

我想删除所选区域，点击外部链接，例如。 [复位]

不幸的是，即使我从折线图对象访问画笔对象，在画笔对象上调用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（）的文档效率不高。

拉丝区域图片：

http://i39.tinypic.com/2uxzprp.jpg

单击粉红色区域旁边的工作，单击[重置]链接不会。

马里乌什

Answer 1

来自docs，

请注意，这不会自动重绘画笔或发送任何画笔听众的事件。要重绘画笔，请在选区上调用画笔或过渡;要调度事件，请使用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>

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

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

4 个答案: