d3.js noob：如何通過動態變量作爲數據

Question

我想通過點擊按鈕傳遞的變量來更改數據集。

下面是我在做什麼，到目前爲止的例子：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; 
      } 
     }) 

在的jsfiddle例如，當你點擊任何按鈕的上方，酒吧應改變基於它的十年數據。然而，代碼期望數據的名稱，而不是動態變量名稱。所以，如果你到js代碼中的第43行並用'sevenvent'替換變量名'currentDecadeName'，那麼一旦單擊任何按鈕，條就會變成七十個數據。我怎樣才能得到這個動態變量而不是靜態數據變量？

當I posted this question in google groups，我被告知使用地圖對象，但我是一個noob，並不清楚d3.map如何工作。

任何人都可以清除在這種情況下如何使用d3.map，或者指向我有關d3地圖對象如何工作的教程？

謝謝！

Answer 1

看看source code，map類似乎很簡單。它基本上等價於一個map/hash/dictionary/object，類似於普通的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說明使用d3.map同樣的事情，它使用.get()函數來訪問元素。