Question

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

我有一个小提琴设置：

我不确定这是我的音阶是错还是画笔本身......

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

D3刷（多个刷子）

1 个答案: