javascript - D3 笔刷（多笔刷）

Question

我有几个要绘制的条形图，并允许用户使用画笔来选择条形图的一部分。代码很简单。

我有一个小提琴设置：

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 选择和回调来做所有事情！