D3 v6에서 마우스 오버 시 노드 데이텀을 가져오는 방법

D3 v6에서 마우스 오버 시 노드 데이터를 가져올 수 없습니다.

D3 v6에서는 이벤트 처리 메커니즘이 이전 버전과 크게 변경되었습니다. 이 문서에서는 이러한 변경 사항을 자세히 알아보고 마우스 오버 이벤트 중에 노드의 데이터를 검색하려고 할 때 발생하는 일반적인 문제에 대한 솔루션을 제공합니다.

D3 v5 이하의 이벤트 처리

D3 v5 이하 , 이벤트 처리 패턴은 다음 형식을 따랐습니다.

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

리스너 함수 내에서 d는 트리거 요소의 데이터를 나타내고, i는 해당 인덱스, 노드는 현재 요소 그룹을 나타냅니다. 추가적으로 d3.event를 통해 이벤트 정보에 접근할 수 있습니다.

D3 v6의 이벤트 처리

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

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

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

노드 데이터 가져오기

D3 v6에서 노드 데이터를 검색하려면 새로운 이벤트 처리 패턴을 사용할 수 있습니다. 다음 예에서는 마우스 오버 이벤트를 처리하고 데이텀에 액세스하는 방법을 보여줍니다.

node.on("mouseover", function(event, d) {
  console.log(d.id); // Outputs the id of the node
});

위치 및 기타 이벤트 속성

트리거 이벤트의 x, y 위치에 액세스하려면 d3을 사용하세요. d3.mouse(this) 대신 포인터(이벤트). x 및 y 속성을 얻으려면 d3.event.x 및 d3.event.y 대신 event.x 및 event.y를 사용하십시오.

요약

이벤트 처리의 주요 변경 사항 D3 v6에서는 이벤트를 첫 번째 매개변수로 전달하고 d3.select(this) 대신 event.currentTarget을 사용합니다. 또한 d3.pointer(event)는 위치 지정을 위해 d3.mouse(this)를 대체합니다. 이러한 변경 사항을 이해하면 D3 v6 애플리케이션에서 이벤트를 효과적으로 처리할 수 있습니다.

위 내용은 D3 v6에서 마우스 오버 시 노드 데이텀을 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!