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()函数来访问元素。