D3刷（多刷）

Question

我要繪制幾個條，並允許用戶使用畫筆選擇條的一部分。 代碼很簡單。

我在以下位置安裝了Fiddle：

http://jsfiddle.net/N32CS/

我不確定是我的體重秤錯了還是刷子本身...

currentG.append("g")
    .attr("id", "g_" + val.curNum)
    .attr("class", "x brush")
    .call(brush)
    .selectAll("rect")
    .attr("y", yScale(arrayData[i].curNum))
    .attr("height", 10);  

它解釋了我遇到的問題，即用戶有時可以拖動到一個欄的區域之外，或者局限於另一個欄的區域。

謝謝！

Answer 1

我更新了您的代碼以使其按預期工作： http : //jsfiddle.net/N32CS/2/

 var brushG = currentG.append("g")
    .attr("id", "g_" + val.curNum)
    .attr("class", "x brush");

    var brush = d3.svg.brush();

    brushG.datum({brush: brush});

...

brush.on("brushstart", function (p) {
  d3.selectAll(".x.brush")
    .filter(function(d) { console.log(d, d.brush != brush);return d.brush != brush; })
    .each(function(d) { d3.select(this).call(d.brush.clear()) });
})

基本上，我將畫筆功能存儲為每個畫筆組上的數據。 當您開始刷時，它會清除所有其他條的筆刷，而不是它自己的。

這是很常見的事情，它確實有助於習慣於將數據綁定到元素。 如果您綁定東西而不是保留全局變量，則可以使用d3選擇和回調來完成所有操作！