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事件来实现这一点。请参阅文档。为了能够选择多个条形图，您需要在全局变量中跟踪当前选择，例如当您单击未选择/选定的条形图时添加和删除的数组。代码可能看起来像

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