使用 for 循环添加多个图表 d3、nvd3答案

【问题标题】：add multiple charts d3, nvd3 using for loop使用 for 循环添加多个图表 d3、nvd3
【发布时间】：2013-09-23 08:45:34
【问题描述】：

我正在尝试使用 nvd3 和 d3 生成多个图表。我有适量的 div。

如果我删除了forloop，那么我会在#chart1 中得到一个图表。如果我放 for 循环，那么我只会在 #chart2 中得到一个图表。

谁能明白为什么？

for (var j = 1; j <= 2; j += 1) {
    var s = '#chart' + j.toString() + ' svg';
    console.log(s);

    nv.addGraph(function() {
        var chart = nv.models.lineChart();

        chart.xAxis.axisLabel('Time step').tickFormat(d3.format(',r'));
        chart.yAxis.axisLabel('eig(' + j.toString() + ')').tickFormat(d3.format('.02f'));
        d3.select(s).datum(function() {

            var sin = [], cos = [];
            for (var i = 0; i < 100; i++) {
                sin.push({
                    x : i,
                    y : Math.sin(i / 10)
                });
                cos.push({
                    x : i,
                    y : .5 * Math.cos(i / 10)
                });
            }

            result = [];
            result.push({
                values : sin,
                key : 'sin',

            });

            return result;
        }).transition().duration(500).call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
}

【问题讨论】：

标签： javascript jquery d3.js nvd3.js

【解决方案1】：

首先，使用 for 循环并不常见（数据驱动文档）。在 d3 中，最好选择您想要的所有元素并像这样使用.each()

d3.selectAll('.chart svg')
    .each(function(data){
        // Do what you would have done in the loop here
})

其次，以您的方式使用匿名函数似乎存在问题（不知道为什么，也没有花太多时间寻找）。通过将其称为实际功能，它可以工作。

nv.addGraph(addMyChart(this))

查看这个 JSFiddle http://jsfiddle.net/a5BYP/

【讨论】：

【解决方案2】：

当我遇到同样的问题时偶然发现了这一点。希望这对像我这样的初学者有所帮助。

nv.addGraph() 将函数作为回调。您传递的这个函数不会立即执行，而是被推送到事件循环中并在一段时间后执行。 nv.addGraph 内部其实很简单，它利用了setTimeout。

for-loop 不起作用的原因是因为 Javascript 作用域。这与此代码打印 5 次 5 而不是 0,1,2,3,4 的原因相同。

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 0)
}

在 JS 中，var 关键字将变量声明到封闭的函数范围（它忽略块范围 - for 或 if 大括号）。如果您将上述所有代码放入$()，那么i 变量将在$() 内的任何地方都可用。

当回调函数被执行时，它可以访问第一次声明它的父环境。

在回调函数内部，遇到i。由于i 没有在回调函数中声明，它会向上一级查找i。它在封闭函数范围内找到 i，但在回调函数运行之前，i 变量已经更新为 5。

【讨论】：