javascript - 使用 for 循环添加多个图表 d3、nvd3

Question

我正在尝试使用 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;
    });
}

Answer 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/