d3.js noob：如何将动态变量作为数据传递 [英] d3.js noob : How to pass dynamic variable as data

问题描述

我试图通过点击的按钮传递的变量更改数据集。

I'm trying to change the data set via a variable passed from the clicked button.

这里是我到目前为止做的一个例子： http://jsfiddle.net/earlybirdtechie/qmC9E/

Here's an example of what I'm doing so far: 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;
            }
        })

b $ b

在上面的jsFiddle示例中，当您单击任何按钮时，条形应该根据十年的数据改变，但是，代码期望数据的名称，而不是动态变量名称。所以，如果你转到第43行的js代码和替换变量名称'currentDecadeName'为'seventies'，那么当任何按钮被点击时，条形将更改为七十年代的数据。如何使用动态变量而不是静态数据变量？

In the jsFiddle example above when you click on any of the buttons, the bars should change based on the data for it's decade. Yet, the code is expecting the name of the data, not a dynamic variable name. So, if you go to line 43 in the js code and replace the variable name 'currentDecadeName' with 'seventies', then the bars will change to the seventies data once any button is clicked. How can I get this to work with a dynamic variable instead of a static data variable?

当我在google群组中发布了这个问题，我被告知要使用地图对象，但我是一个noob清除d3.map如何工作。

When I posted this question in google groups, I was told to use the map object, yet, I'm a noob and not clear on how d3.map works.

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

Can anyone clear up how one can use d3.map in this situation, or point me to a tutorial on how the map object works in d3?

感谢！

推荐答案

查看源代码， map 类似乎很简单。它基本上相当于一个map / hash / dictionary /对象，类似于一个普通的JavaScript对象，有一些方便的功能。我对d3不太熟悉，因此 map 旨在与库的其他部分集成。

Taking a look at the source code, the map class seems to be very simple. It's basically the equivalent of a map/hash/dictionary/object, similar to a normal JavaScript object, with some convenience functions. I'm not too familiar with d3, so perhaps map is designed to integrate well with other parts of the library.

实质上，你想做的是以某种从名称（字符串）到值（数据点数组）的映射来收集你的数据。您实际上不需要使用 d3.map - 在这种情况下，一个简单的对象就足够了。

In essence, what you want to do is collect your data in some sort of "mapping" from names (strings) to values (arrays of datapoints). You don't actually need to use d3.map - a simple object would suffice in this case.

这里有一个简单的JavaScript对象的例子。您只需要在范围内保留一个映射：

Here's an example with a simple JavaScript object. You just need to keep a mapping in scope:

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 })
...

http://jsfiddle.net/voithos/qmC9E/2/ =nofollow>这里是一个JsFiddle 说明同样的事情使用 d3.map ，它使用 .get（）函数来访问元素。

And here's a JsFiddle illustrating the same thing using d3.map, which uses the .get() function to access elements.

这篇关于d3.js noob：如何将动态变量作为数据传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！