0

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;
    });
}
4

2 に答える 2

2

まず、(データドリブン ドキュメント)のように 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/を参照してください

于 2013-09-24T11:21:16.207 に答える
2

私が同じ問題に直面していたとき、これに出くわしました。これが私のような別の初心者に役立つことを願っています。

nv.addGraph()関数をコールバックとして受け取ります。渡されたこの関数はすぐには実行されませんが、代わりにイベント ループにプッシュされ、しばらくしてから実行されます。内部的nv.addGraphには実際には非常に単純で、setTimeout.

for ループが機能しなかった理由は、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変数は .xml 内のどこでも使用できます$()。

コールバック関数が実行されると、最初に宣言された親環境にアクセスできます。

コールバック関数内で、 に遭遇しiます。はコールバック関数内で宣言されていないためi、1 レベル上に移動して を探しますi。i囲んでいる関数スコープで見つかりますが、変数はコールバック関数が実行される前にi既に更新されています。5

于 2018-07-25T15:00:05.383 に答える