Plotly.js Sunburst 차트의 상태 변경 확인

Question

선버스트 차트를 표시하기 위해 줄거리를 사용하는 React 애플리케이션이 있습니다. 선버스트 차트의 "확대/축소 상태"에 따라 변경되는 다른 작업/구성 요소가 있습니다. 예를 들어 완전히 축소하면 버스트 차트에 4개의 동심원이 표시됩니다. 중앙에서 두 번째 원을 클릭하면 확대되고 동심원은 3개만 표시됩니다. 클릭 핸들러를 통해 상태를 확인할 수 있다고 생각했는데 쉽지 않은 것 같습니다.

내가 관심 있는 상태는 실제로 보이는 것이 무엇인지, 어느 정도 깊이(동심원이 몇 개인지)입니다.

몇 가지 콜백이나 상태를 반영하는 것을 찾고 싶었지만 제가 찾은 것은 선버스트 차트에 대한 클릭 핸들러뿐이었습니다(https://github.com/plotly/react-plotly.js/blob 참조). master/README.md#event-handler-props-onSunburstClick, https://community.plotly.com/t/capturing-sunburst-on-click-events/32171)

문제는 클릭에서 상태를 추론하기 어렵다는 것입니다. 단락을 클릭하면 상태가 다양한 방식으로 변경됩니다. 가장 바깥쪽 단락을 클릭해도 상태가 전혀 변경되지 않습니다. 가장 안쪽 원을 클릭하면 가장 안쪽 원에 현재 표시되는 단락에 따라 확대되거나 축소될 수 있습니다.

codepen의 누군가가 다음 코드를 기반으로 한 예제를 가지고 있습니다:

Plotly.newPlot('그래프', [{
  유형: '햇빛',
  부모: ['', '루트', '루트', 'A'],
  라벨: ['루트', 'A', 'B', 'a']
}]).then(gd => {
  gd.on('plotly_sunburstclick', console.log)
})

그쪽으로 가서 'A'를 클릭하면 'A'가 중심원이고 'a'가 외곽원인 상태로 들어갑니다. 다시 'A'를 클릭하면 중심원으로 'root'가 표시됩니다. 클릭 핸들러의 경우 두 번의 클릭은 기본적으로 동일해 보이지만 결과 상태(제가 관심 있는 부분)는 다릅니다. 내 경우에는 확장인지 축소인지 추론하기 위해 몇 가지 경험적 방법을 시도했지만 일관되게 작동하는 것은 아무것도 없었습니다.

해결책을 찾았지만 지금까지 찾은 가장 가까운 것은 클릭 핸들러인데, 약간의 노력 후에도 문제가 해결되지 않았습니다. 이미 답변이 있으면 좋습니다. 하지만 이미 해결되었는지 확인하지 않은 채 질문을 중복으로 표시하는 데 너무 성급하지 마십시오. 언급된 답변이 실제로 새 질문을 다루지 않고 실제 질문에 답변하려는 토론과 시도가 효과적으로 종료되는 중복으로 표시되는 많은 질문을 봅니다.

반드시 줄거리를 사용할 필요는 없으며 내 문제를 해결할 수 있는 다른 React 라이브러리가 있다면 언제든지 제안해 주세요.

Answer 1

이 경우 클릭 이벤트는 궁극적으로 "스위치"와 유사한 동작을 트리거합니다.

기본적으로 계층 구조의 루트 노드와 모든 하위 노드가 표시됩니다.

• 하나 이상의 하위 노드(예: 'A')가 있는 링을 클릭하면 상위 노드('루트')와 형제 노드('B')가 필터링되고 시각적으로 링이 새 루트 노드로 처리됩니다. 링 아래의 계층 구조가 표시됩니다(즉, 링 필터링 스위치가 켜져 있고 이벤트 데이터의 nextLevel 속성이 이에 따라 'A'로 설정됩니다(예: "A는 새 루트 노드입니다")).

• 링(이제 가장 안쪽 링)을 다시 클릭하면 필터가 꺼지고 상위 및 형제 노드가 다시 나타나며 nextLevel'루트'로 설정됩니다.

• 하위 노드(예: 'a' 또는 'B')가 없는 링을 클릭하면 효과가 없으므로 이 경우 nextLevel는 정의되지 않습니다.

실제로 속성 nextLevel은 상태의 변화를 반영합니다.

이제 클릭 핸들러에서 무슨 일이 일어나고 있는지 더 잘 이해하려면 currentpath(또는 일관성을 위해 약간 수정한 버전)와 currentpath（或为了一致性，稍微调整过的版本）以及nextLevel의 존재/값을 확인하는 것이 좋습니다.

으아악