2013-09-02 4 views
4

d3.js Sankey 시각화 필터에 카테고리에 따라 데이터 세트를 설정하려고합니다. 이 예와 같이d3.js sankey 다이어그램의 데이터 필터링

I는 입력 데이터를 방법 d3.csv 사용하고 - http://bl.ocks.org/timelyportfolio/5052095

enter image description here

I 그러나 네 개의 열이있는 데이터 세트를 업로드하고자

-

소스 , 목표, 가치, 범주

내 목표는 범주 간 전환 기능을 사용하여 시각화하는 것입니다. 따라서 각 Sankey 시각화는 하나의 특정 카테고리만을 나타냅니다. 그런 다음 사용자는 드롭 다운에서 다른 것으로 전환 할 수 있습니다.

현재 d3.csv 입력 방법을 사용하면 가능합니까?

+1

카테고리 열을 추가 할 수 있도록 시각화 또는 csv 파일의 내용을 조정하는 데 도움이 필요합니까? –

답변

4

이 방법이 유용할까요?

d3.csv("file.csv", function(data) { 
    [...] 

    // Called each time there is an action on the dropdown menu 
    function updateGraph() { 
     // Select only data that are tagged with a certain category 
     var dataset = data.filter(function(d) { return d.category == selectedCategory; }); 
     // Update graph visualization 
    } 
} 

이렇게하면 매번 CSV 파일을 다시로드 할 필요가 없습니다.

+0

감사합니다. 내 질문에 답합니다. 그러나 selectedCategory 함수에 관한 다른 쿼리가 있습니다. 드롭 다운 선택시 변경하려면 어떻게해야합니까? 죄송합니다. 아직 js와 d3를 통해 내 길을 배웁니다. 건배. –

+1

jQuery를 권장합니다. 특히 부트 스트랩 구성 요소 ([dropdown here here] (http://getbootstrap.com/javascript/#dropdowns) 참조)를 사용하고 있으며 웹 응용 프로그램을 처음 사용하는 경우 좋은 방법입니다. (그것이 내가 취한 길이며, 빠르게 움직이는 데 정말로 도움이되었습니다.) 드롭 다운 메뉴의 어떤 옵션이 활성화되어 있는지 확인해야합니다. –

0

두 번째 부분은 매우 긴 방법이지만 범주에 따라 여러 개의 html/php 및 csv 파일을 만든 다음 각 html/php 파일에 다음 코드를 추가하십시오. 이 방법은 많은 범주가있는 경우 추가 작업이됩니다.

<a href="Category 1.php">Category 1</a> 
<a href="Category 2.php">category 2</a> 

가능한 해결책을 찾은 경우 가능한 경우 답변을 업데이트하십시오. 도움이 될 것입니다.

감사합니다.