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

基本上，我将画笔功能存储为每个画笔组的数据。当您开始刷牙时，它会清除所有其他栏的刷子，而不是它自己的刷子。

这是一件很常见的事情，它确实有助于习惯将数据绑定(bind)到元素。如果您绑定(bind)东西而不是保留全局变量，您可以使用 d3 选择和回调完成所有操作!