1

我正在尝试通过从单击的按钮传递的变量来更改数据集。

这是我到目前为止所做的一个例子：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 行并将变量名称 'currentDecadeName' 替换为 'seventies'，那么一旦单击任何按钮，条形就会变为 70 年代数据。我怎样才能让它与动态变量而不是静态数据变量一起工作？

当我在 google groups 中发布这个问题时，我被告知要使用 map 对象，但是，我是个菜鸟，不清楚 d3.map 是如何工作的。

任何人都可以澄清如何在这种情况下使用 d3.map，或者指向我关于地图对象如何在 d3 中工作的教程？

谢谢！

4

1 回答 1

1

看看源代码，这个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 })
...

这是一个 JsFiddle使用 来说明同样的事情d3.map，它使用该.get()函数来访问元素。

于 2013-03-03T19:02:25.040 回答