d3.js noob : 동적 변수를 데이터로 전달하는 방법

Question

클릭 한 버튼에서 전달 된 변수를 통해 데이터 세트를 변경하려고합니다.

가 여기에 내가 지금까지 뭘하는지의 예입니다 : 당신이 버튼 중 하나를 클릭하면 위의 jsFiddle의 예에서 http://jsfiddle.net/earlybirdtechie/qmC9E/

d3.selectAll('button.decadeBtn') 
    .on("click", function() { 
     var currentDecadeName = $(this).attr('data-decade'); 
     console.log('currentDecadeName: '+ currentDecadeName); 
     svg.selectAll("rect.bars") 
     .data(currentDecadeName, function(d) { return d.id }) 
     .transition() 
     .duration(1499) 
     .ease("bounce") 
     .attr({ 
      height: function(d,i) { 
       return d.value; 
      } 
     }) 

, 바는 그것의 십 년간의 데이터에 따라 변경해야합니다. 그러나 코드는 동적 변수 이름이 아니라 데이터의 이름을 기대합니다. 따라서 js 코드에서 43 행으로 이동하여 'currentDecadeName'변수 이름을 '70 년대'로 바꾸면 버튼을 클릭하면 막대가 70 데이터로 변경됩니다. 정적 데이터 변수 대신 동적 변수를 사용하려면 어떻게해야합니까?

I posted this question in google groups 일 때, 나는지도 객체를 사용한다고 들었지만, 나는 d3.map이 어떻게 작동하는지에 대해 멍청하고 명확하지 않습니다.

이 상황에서 어떻게 d3.map을 사용할 수 있는지 정리할 수 있습니까? 아니면지도 객체가 d3에서 어떻게 작동하는지에 대한 자습서를 가르쳐 주실 수 있습니까?

감사합니다.

Answer 1

source code에서 살펴보면 map 클래스는 매우 간단합니다. 이것은 기본적으로지도/해시/사전/객체와 동일합니다. 일부 편의 기능이있는 일반 JavaScript 객체와 유사합니다. 나는 d3에 익숙하지 않으므로 아마도 map은 라이브러리의 다른 부분과 잘 통합되도록 설계되었습니다.

본질적으로, 이름 (문자열)에서 값 (배열 데이터 집합)으로의 일종의 "매핑"으로 데이터를 수집해야합니다. 실제로 이 필요하지 않습니다. d3.map을 사용하려면을 사용해야합니다.이 경우 간단한 개체이면 충분합니다.

다음은 간단한 JavaScript 객체의 예입니다. 당신은 범위에 매핑을 유지해야합니다

var sixties = [ ... ]; 
var seventies = [ ... ]; 

// Create mapping as an object 
var map = { 
    sixties: sixties, 
    seventies: seventies 
} 

... 

d3.selectAll('button.decadeBtn') 
.on("click", function() { 
    var currentDecadeName = $(this).attr('data-decade'); 
    svg.selectAll("rect.bars") 
    // Lookup the current decade name in the mapping 
    .data(map[currentDecadeName], function(d) { return d.id }) 
... 

그리고 here's a JsFiddle 요소에 액세스 할 수 .get() 함수를 사용 d3.map를 사용하여 같은 일을 설명.