是否可以使用鼠标在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();
    });