Hightchart에서이다, D3 JS로 드릴 다운

Question

어떤 하나 D3 JS 라이브러리를 열 드릴 다운을 수행하는 방법을 제안 시겠어요와 차트 열, 예를 아래에

을 만드는 방법

http://www.highcharts.com/demo/column-drilldown

Answer 1

이 문제에 대한 완전한 코드 예제는 아마도 꽤 광범위하기 때문에, 나는 당신이 접근하고 어떻게 개념을 코드로 바꾸기에 충분한 지 알고 있다고 가정합니다.

일반 막대 차트를 그릴 수있는 기능이 있다고 가정합니다. 해당 기능의

일부는 priobably에 기초하여 SVG 요소 및

이 저울 (Y에 대한 X의 하나는)

추가 축을 설정 컨테이너를 설정

1. 같은 것들이 될 것이다 당신이
2. 이
   4.1 당신이 당신의 데이터를 배열로 사용 가능한 설정이 확인합니다 SVG 컨테이너에 줄을 추가 만든 저울은
   4.2은이 셀프를 입력 만들기 사용 가능한 데이터에 대한 ection 및 추가 rect 요소
   4.3 업데이트 가능한 모든 바 노드 x, y
   4.4과 같은 간단한 막대 그래프가 이탈 선택

짜잔에있는 모든 노드를 제거 속성. 새로운 내용이 없으며 여기에서 코드 세부 정보를 살펴볼 수 있습니다. ->https://bl.ocks.org/mbostock/3885304 드릴 다운을 수행하려면 다음을 수행하십시오. 많은 코드 반복을 피하기 위해 위의 단계를 다음과 같이 분리하십시오. 기능. 그래서 예를 들어, 당신의 체중계뿐만 아니라 당신의 svg와 콘테이너를 생성하는 셋업 기능이 있습니다.

설치 기능에 대한 중요 사항은 드릴 스루에서 다시 실행하지 않아도된다는 점입니다.

두 번째로 update 기능을 원할 것입니다. 여기에는 3 이상의 단계가 포함되어 있으며 드릴 스루하여 차트를 업데이트하기 위해 재실행해야합니다.

여기에 한 가지 추가 사항은 처음부터 규모 도메인을 업데이트하는 기능을 추가하는 것입니다 (데이터가 드릴 스루시 변경되고 사용자가 저울에 반영하기를 원할 때).

지금 당신은 그 두 가지 기능을 가지고 당신이 정말로 할 필요가있다 :

이 축 레이블 또는 막대에 클릭 처리기를 추가 (지금은 쉬울 수 있습니다 바 클릭). 당신은 d3의 .on() 기능을 사용할 수 있습니다. 그 경우에는 클릭 한 막대의 값을 기준으로 데이터의 하위 집합을 만들거나 (데이터가 구조화 된 방식에 따라 막대 값에 대한 새 데이터 집합을 얻는) 위에서 만든 업데이트 기능을 새 데이터로 실행해야합니다 .

그것은이 같은 것을 볼 수 있었다 : 아무것도 불분명

d3.selectAll('.bar-nodes) .on('click', function(d) { var updatedData = updateData(d); updateChart(updatedData); });

경우 좀 더 구체적인 질문은 좋은 것입니다. 도움이 되길 바랍니다.