D3.js：如何从图表的刷选区域选择数据？

Question

我有以下图表，其中使用鼠标刷（浅蓝色区域）选择数据。 如何获取所选区域的数据？ 我尝试了以下和许多其他解决方案，但似乎都不起作用。

brush.on('brush', function(d){  
    console.log(d);
});

请查看JSFIDDLE。

- CuriousSuperhero

Answer 1

您可以使用以下代码获取画笔所选的y轴范围：

brush.on('brush', function(d){  
    k = brush.extent();
    console.log(k);
});

要获取所选刷区域内的数据，请执行以下操作：

k = brush.extent();
j = data.filter(function(d){
    return k[0] <= d.date && k[1] >=d.date;
});
console.log(j)//this is the selected dataset

这里有可运行的代码，请点击此处

希望这能对您有所帮助！

- Cyril Cherian

---

那个console.log显示了所选刷区域的开始和结束时间，但是我怎样才能获取在所选刷区域内的数据对象呢？ - CuriousSuperhero

你可以使用我更新的范围来过滤数据，我也更新了fiddle。输出将在控制台上显示 :) - Cyril Cherian

Answer 2

对于 d3v4，您可以使用以下方式：

var selection = d3.event.selection;
var e = selection.map(x.invert, x); // return [start,end] for axis

- weibin Wang