D3 Brush (multiple brushes)

Question

I have several bars I'd like to draw and allow the user to use a brush to select a portion of a bar. The code is simple.

I have a Fiddle setup at:

http://jsfiddle.net/N32CS/

I'm not sure if it is my scale's that are wrong or the brushes themselves...

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);  

It explains the problem I'm having of the user being able to at times drag outside the area of one bar or being limited to the area of another bar.

Thanks!

Answer 1

I updated your code to work as intended: 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()) });
})

Basically I'm storing the brush function as data on each of the brush groups. when you start brushing it clears the brushes for all the other bars and not it's own.

This is a pretty common thing, where it really helps to get used to binding data to the elements. If you bind stuff rather than keeping around global variables you can do everything with d3 selections and callbacks!