1

ここで生成された非常に優れた d3 の例に基づいて構築していますhttp://2011.12devsofxmas.co.uk/2012/01/data-visualisation/

私はまだ探索段階にあり、元のバージョンのコードのすべてのビットが何をするのか、視覚化の目標を達成するためにどのように適応させるかを考えています。

これが現在のバージョンのブロックです。ビジュアライゼーションは、[新しいウィンドウで開く] をクリックすると最適に表示されます

http://bl.ocks.org/natemiller/119c49ffc4f159fd49ce

d3 は比較的新しく、JavaScript も非常に新しいため、学習曲線はかなり急勾配でした。いずれにせよ、私の小さな単純な実践例で遭遇した問題は、すべてのデータがプロットされていないということです。7 つのデータ ポイントではなく、3 つしかないことがわかります。ここで何が起こっているのか完全にはわかりません。

私が行ったいくつかのバックグラウンド トラブルシューティング: 元のコードは、ここで使用しているものではなく、バージョン 2.7 の d3/d3.js スクリプトを使用していました (" http://d3js.org/d3.v3.min.js ")。さらに、彼らは別のスクリプト d3/d3.csv.js を使用しました。.csv ファイルを読み込むと仮定します。このスクリプトは省略し、d3.js 内で d3.csv() を使用しました。

これらの元のスクリプトを両方ともコードに残すと、視覚化は適切にプロットされます (7 データ ポイント) が、元の d3.js (v.2.7) を現在のバージョンに置き換えると、3 つのデータ ポイントのみでプロットが得られます。

ここで何が起こっているのか分かりますか?すべてのデータポイントがプロットされるように、投稿したコードを変更する方法について考えていますか?

助けてくれてありがとう、

ネイト

4

1 に答える 1

3

あなたが持っている55行目.data(rawData, function (d) { return d.site;}),

に変更してみてください.data(rawData),

.data の 2 番目の引数はキーです。サークル svg 要素を作成しようとすると、3 つの異なる値 (d.site のサイト 1、サイト 2、およびサイト 3) しかないキーが参照されるため、3 つのサークルのみが作成されます。

データ選択方法の参考はこちら

于 2013-03-12T21:13:15.470 に答える