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 선택 및 콜백으로 모든 것을 할 수 있습니다!