D3 v6에서 마우스 오버 이벤트 중에 노드 데이텀을 가져오는 방법은 무엇입니까?

D3 v6에서 마우스오버 이벤트 중 노드 데이텀을 획득하는 방법

D3 v6 이상에서는 선택을 통해 노드의 바인딩 데이텀을 검색합니다. on()은 이전 버전과 다릅니다. 마우스 이벤트 데이터를 수신하는 대신 데이텀은 이벤트 리스너에 전달되는 두 번째 매개변수가 됩니다.

D3v5 및 이전 버전

이전에는 D3의 이벤트 리스너가 다음 패턴을 따랐습니다. :

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

여기서:

• d는 이벤트를 트리거하는 요소의 데이터입니다.
• i는 해당 인덱스입니다.
• nodes는 현재 그룹입니다. of selected elements

d3.event를 사용하여 이벤트 관련 데이터에 액세스할 수 있습니다.

D3v6

D3v6에서는 패턴이 변경되었습니다. to:

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

이제 이벤트 객체가 첫 번째 매개변수로 직접 전달되고 데이텀이 두 번째 매개변수로 전달됩니다. 결과적으로 d3.event는 더 이상 사용되지 않습니다.

데이텀 액세스

마우스 오버 대상의 데이텀을 검색하려면:

node.on("mouseover", (event, d) => { 
    console.log(d); 
});

이벤트 위치 결정

D3v5에서는 d3.mouse(this)를 사용하여 이벤트의 x,y 위치를 얻을 수 있습니다. D3v6에서는 다음을 사용합니다.

d3.pointer(event);

예

다음 예는 마우스 오버 이벤트 중에 데이텀 및 이벤트 위치를 얻는 방법을 보여줍니다.

const data = [
    {
        "id": "Myriel",
        "group": 1
    }, 
    {
        "id": "Napoleon",
        "group": 1
    }
];

const nodes = svg.append("g")
    .selectAll("circle")
    .data(data)
    .join("circle")
    ...;

node.on("mouseover", (event, d) => {
    console.log(d.id); 
    console.log(d3.pointer(event));
});

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