3

先週 D3js をテストした後、私は nvd3 の初心者です。D3 で行ったnvd3 を使用して .csv ファイルからデータをロードしたいのですが、 nvd3では実行できません... 誰かがそれを行う方法を知っていますか? D3 で次の行を書き、wather.csv からデータを取得します。

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

私のweather.csvファイルを次のように考えます：

"Hour";"T";
"25.04.2013 12:00";"18.7";
"25.04.2013 11:00";"18.5";
"25.04.2013 10:00";"18.4";
"25.04.2013 09:00";"18.9";
...

Nvd3 の例では、コード内に変数のみが見つかり、.csv または .json ファイルは読み込まれませんでした。ファイルからデータを読み込み、単純な棒グラフを表示したいと思います。

更新しました

ここに私が実装したコードがありますが、動作しません。D3 の関数 .csv を使用していますが、ナビゲーターにデータが存在しないと表示され、その理由がわかりません。

var parseDate = d3.time.format("%d.%m.%Y %H:%M").parse;
d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })  

    nv.addGraph(function() {  
        //console.log(data);
        var chart = nv.models.discreteBarChart()
            .x(function(d) { return d.date })
            .y(function(d) { return d.T })
            .staggerLabels(true)
            //.staggerLabels(historicalBarChart[0].values.length > 8)
            .tooltips(false)
            .showValues(true);

        d3.select('#chart1 svg')
            //.datum(historicalBarChart)
            .datum(data)
            .transition().duration(500)
            .call(chart);

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

ありがとう。

4

3 に答える 3

2

最後に、コードでエラーが発生しました。NVD3.js の例では、D3.js から v2 ファイルを読み込みます。D3 の 2.x バージョンを使用する場合、次のコードで外部データをロードする必要があります。

d3.csv("weather.csv", function(data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

v3 の更新後、このことが変更され、エラー引数が表示され、.csv 関数内でエラー ケースを制御できるようになりました。

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    });
});

ここでは、D3.js の作成者である Mike Bostock が説明したこの変更を確認できます。

于 2013-04-26T10:35:05.313 に答える
0

職場でいくつかの nvd3 チャートを調べました。

基本的に、CSV を JSON 構造に変換して、nvd3 ライブラリで必要な構造に渡すことができるようにします。

私は間違っているかもしれませんが、目的に合わせて、必要に応じていつでもコードをいじることができます。

于 2013-04-26T09:49:16.377 に答える
0

nvd3 でも、D3 で利用可能なデータをロードするためのすべての方法を使用できます。この例では、d3.json関数を使用してデータをロードします。それを単純に置き換えてd3.csv、データの処理を追加することができます。

于 2013-04-26T09:21:11.740 に答える