D3 v6 이상에서는 이벤트 리스너가 어떻게 변경되었습니까?

D3 v6의 이벤트 리스너 이해

D3에서 이벤트 리스너는 요소에서 특정 이벤트가 발생할 때 작업을 트리거하는 데 사용됩니다. 데이터 바인딩된 요소로 작업할 때 이벤트 처리 중에 관련 데이터에 액세스하는 것이 중요합니다. 여기서 D3 v5와 D3 v6 간의 이벤트 리스너 패턴 변경이 적용됩니다.

D3 v5 이하

D3 버전 5 이하에서는 다음과 같습니다. 패턴이 사용되었습니다:

selection.on("eventType", function(d, i, nodes) { ... })

여기서 d는 이벤트를 트리거하는 요소의 데이텀을 나타내고, i는 해당 인덱스, 노드는 현재 요소 그룹을 나타냅니다. 이벤트 정보는 d3.event를 사용하여 이벤트 리스너 내에서 액세스할 수 있습니다.

D3 v6 및 Beyond

D3 v6에서는 패턴이 다음과 같이 수정되었습니다.

selection.on("eventType", function(event, d) { ... })

이제 이벤트는 첫 번째 매개변수로 리스너에게 직접 전달되고, 데이텀은 두 번째 매개변수가 됩니다. 결과적으로 d3.event 전역 변수가 제거되었습니다.

Datum 액세스

D3 v6에서 이벤트를 트리거한 노드의 바인딩된 데이텀을 검색하려면 , 이벤트 리스너 함수에서 d 매개변수를 사용하면 됩니다. 이는 아래 수정된 코드에서 확인할 수 있습니다.

<code class="js">node.on("mouseover", (event, d) => {
    console.log(d.id);
});</code>

기타 주목할만한 변경 사항

• 이: 여전히 d3를 사용할 수 있습니다. 이벤트 리스너 함수 내에서 현재 요소에 액세스하려면 select(this)를 사용하세요. 그러나 화살표 함수를 사용할 때 범위가 다를 수 있습니다.
• 위치 지정: 트리거 이벤트의 x 및 y 위치를 얻으려면 SVG와 관련하여 d3.mouse(this) 대신 d3.pointer(event)를 사용하십시오.
• 이벤트 속성: 이제 이벤트는 d3.event를 통하지 않고 직접 속성을 노출합니다. 예를 들어 event.x 및 event.y는 d3.event.x 및 d3.event.y를 대체합니다.

위 내용은 D3 v6 이상에서는 이벤트 리스너가 어떻게 변경되었습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!