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