0

パスと組み合わせる必要があるかどうかにかかわらず、d3.svg.line() コマンドがどのように機能するかを理解するのに問題があります。
数値で2列（日、気温）で作成されたcsvを使用して折れ線グラフを描画しようとしてきましたが、コードに何も表示されない理由がわかりません。

Jsfiddle はこちら: http://jsfiddle.net/UjhjY/

var line = svg.selectAll("line")
                    .data(dataset)
                    .enter()
                    .append("line")
                    .interpolate("linear")
                    .x(function (i) { return xScale(i); })
                    .y(function (d) { return yScale(d[1]); });

        var path = svg.append("path")
            .attr("d", line(dataset))
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none");

コードの作業中、ブラウザには svg ファイル以外は何も表示されません。そして、私は今何をすべきかについてかなり無知です。行とパスについて見つけることができるほとんどすべてを読んだが、それを機能させることができなかったので、どんな助けと説明も本当に感謝しています。

4

1 に答える 1

3

コードにはいくつかの問題があります。まず、d3.csvは非同期コールバックであり、 のように使用することはできませんvar dataset = d3.csv("line_graph.csv");。2 番目の引数は、データにアクセスできる関数です。コードは次のようにする必要があります。

d3.csv("file.csv", function(error, data) {
  // create graph
});

おそらく、CSV から解析されたデータを文字列から実際のデータ形式 (数値など) に変換することも必要になるでしょう。

data.forEach(function(d) {
  d.temperature = +d.temperature;
});

スケールを設定するときは、データの正しい部分を参照していることを確認してください。あなたはおそらく次のようなものが欲しい

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) { return d.temperature; })])
    .range([0, height]);

返す代わりにd[1]。

次に、ラインを作成するには、ライン ジェネレーターが必要です。これは、このように設定されます。

var line = d3.svg.line()
  .x(function(d) { return xScale(d.date); })
  .y(function(d) { return yScale(d.temperature); });

次に、そのようにラインジェネレーターを使用してパスを作成できます。

svg.selectAll("path").data(data)
   .enter().append("path")
   .attr("d", line);

これらは、私を襲った最も明白な問題です。これは、探しているものに非常に近い例です。いくつかのチュートリアルと例を確認することを強くお勧めします。

于 2013-10-05T10:35:39.613 に答える