javascript - 是否可以用鼠标在 d3.js 条形图上选择多个条形

Question

我试图用谷歌搜索这个问题，但没有成功。

我想要的是在 d3.js 中采用标准条形图，例如这样

http://bl.ocks.org/1218567

然后用鼠标选择中间的 4 个条，然后以某种方式仅获取所选值的值。

d3 可以实现这样的功能吗？

<小时/>

编辑:我认为我的问题可能有点误导，我不想多次单击来选择对象，我想单击并拖动一次并选择底层对象，请参阅我的评论中的 sencha 示例。

已解决:

d3.brush 就是答案，您可以在此处查看工作演示 http://mbostock.github.com/d3/ex/splom.html

Answer 1

您可以使用.on()函数和click事件来实现这一点。请参阅the documentation 。为了能够选择多个条形，您需要在全局变量中跟踪当前选择，例如，当您单击未选择/选定的条形时添加和删除的数组。代码可能类似于

var selection = [];
...
var bars = vis.selectAll("g.bar")
    .data(data)
    .enter()
    .append("svg:g")
    ...
    .on("click", function(d) {
        if(selection.indexOf(d) == -1) { selection.push(d); }
        else { selection.splice(selection.indexOf(d), 1); }
        updateSelectionDisplay();
    });