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