브러시를 불연속 범위로 제한

Question

brush을 사용하여 사용자가 값 범위를 선택하도록하고 싶습니다. 그러나 이산 값만이 내 응용 프로그램에서 의미가 있으므로 브러시를이 개별 값 (정수)으로 제한하고 싶습니다.

이렇게하는 한 가지 방법은 Ordinal Brushing에 설명 된 방법을 사용하는 것입니다. 이 예에서 브러시 자체는 연속 값을 취할 수 있으며, 그 다음에 서수 스케일의 불연속 값에 매핑됩니다.

브러시를 끌거나 브러쉬를 드래그하는 동안 개별 값으로 스냅하는 브러시를 얻고 싶습니다. target.extent 반올림 한 다음 둥근 범위 (Fiddle) 다시 선택 : 나는 기본적으로 작동하는 무언가를 내놓았다

function brush() { 
    var s = d3.event.target.extent(); 
    if (d3.event.mode === "move") { 
     var extentlength = Math.round(s[1] - s[0]) 
     d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5, 
     Math.round(s[0] + 0.5) - 0.5 + extentlength]) 
    } else { 
     d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5, 
     Math.round(s[1] + 0.5) - 0.5]) 
    } 
    d3.event.target(d3.select(this)) 
} 

그러나

, 이것은 조금 투박한 느낌을, 그것은 바람직하지 않은 행동을 유도하는 사용자가 브러시를 드래그하는 동안 커서가 브러쉬 가장자리로 이동하여 커서 심볼을 "드래그"에서 "크기 조정"--arrow로 바꿀 수 있습니다.

불연속 범위 만 선택할 수있는 브러시를 더욱 우아하고 강하게 얻을 수있는 방법이 있습니까?

Answer 1

D3가 브러시를 렌더링하는 데 사용하는 svg 노드의 내부로 너무 많이 파고들 수도 있지만, 그 중 하나는 노드를 선택하고 커서 스타일을 변경하는 것입니다.

var brush = d3.svg.brush().x(x).extent([0.5, 1.5]) 
    .on("brushstart", brushstart) 
    .on("brush", brush) 
    .on("brushend", brushend); 

function brushstart() { 
    // disable the resizing cursor 
    var resizers = d3.select(this).selectAll('g.resize') 
    .style("cursor", "auto"); 
} 

function brushend() { 
    // re-enable the resizing cursor 
    var resizers = d3.select(this).selectAll('g.resize') 
    .style("cursor", "ew-resize"); 
} 

:

<g style="pointer-events: all;"> 
    <rect class="background" style="visibility: hidden; cursor: crosshair;"></rect> 
    <rect class="extent" style="cursor: move;"></rect> 
    <g class="resize e" style="cursor: ew-resize;"> 
    <rect style="visibility: hidden;"></rect> 
    </g> 
    <g class="resize w" style="cursor: ew-resize;"> 
    <rect style="visibility: hidden;"></rect> 
    </g> 
</g> 

그래서 예를 들어, 당신은 완전히 브러시 이벤트 기간 동안 크기 조정 커서를 해제 할 수 : 귀하의 예제에서이 같은 브러시 모양에 대해 생성 된 노드 (I는 속성의 일부를 손질)

내가 말했듯이 이것은 D3가 향후 버전에서 브러시의 svg 노드 구조를 변경하는 위험에 이르게하지만 개념적으로나 계산 상 상당히 간단합니다. 브러쉬 이벤트 내부의 this은 브러시 자체의 바깥 쪽 <g> 노드를 나타내므로 해당 레벨 아래의 선택기를 적용하여 크기 조정 노드를 찾습니다.

커서를 변경하기 위해 brush 함수 내부에 추가 논리를 추가 할 수 있지만 마우스 이동시 평가되므로 훨씬 더 비쌉니다.