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行并将变量名'currentDecadeName'替换为'seventies'，那么一旦点击任何按钮，这些条将变为七十年代的数据。如何使用动态变量而不是静态数据变量？

当I posted this question in google groups时，我被告知要使用地图对象，但是，我是一个菜鸟，并且不清楚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()使用{{1}}函数来访问元素。

d3.js noob：如何将动态变量作为数据传递

1 个答案: