D3 v6에서 마우스 오버 시 노드 데이텀에 액세스하는 방법은 무엇입니까?

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

문제:

D3에서 v6에서는 Selection.on()을 사용하여 마우스 오버 이벤트 리스너를 노드에 추가할 때 노드의 데이터 대신 이벤트 데이터가 반환됩니다. 데이터는 어떻게 얻을 수 있습니까?

답변:

D3v5 이하:

D3 v5 이하에서는 이벤트 리스너를 정의하는 데 다음 패턴이 사용되었습니다.

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

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

D3v6:

D3 v6에서는 이벤트 리스너 패턴이 다음으로 변경되었습니다.

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

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

d3.select(this) 사용

이벤트 리스너 기능에서 d3.select(this)를 사용하여 계속 선택할 수 있습니다. D3 v6에서도 트리거 요소입니다. 그러나 화살표 기능을 사용하면 범위가 달라집니다.

Positioning:

이전에 검색된 이벤트의 x,y 위치를 얻으려면 d3.mouse(this), 이제 d3.pointer(event)를 사용할 수 있습니다. x 및 y 속성에 직접 액세스하려면 d3.event.x 및 d3.event.y 대신 event.x 및 event.y를 사용하세요.

예:

다음 예에서는 D3 v6의 이벤트 리스너 함수에 이벤트와 데이터를 전달하는 방법을 보여줍니다.

const svg = d3
  .select("body")
  .append("svg");

svg
  .selectAll("rect")
  .data([1, 2, 3])
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", function (d) {
    return d * 50;
  })
  .on("click", function (event, d) {
    console.log(d);
    console.log(d3.pointer(event));
  });

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