1

http://nvd3.org/ghpages/scatter.html

上記の例に非常によく似たチャートを作成したいと思います。私はまだ初期段階にあり、自分のデータを CSV として、またはコード内にインラインで入力しようとして少し苦労しています。

以下のコードは、偽のデータを生成してグラフに入力する役割を担っていると確信していますが、実際のデータを入力する正しい方法を見つけることができないようです。d3 サイトのドキュメントの「データ」参照部分を読み、コードを実装しようとしましたが、動作させることができませんでした。問題は構造化にあると思います。問題は、データ配列を構造化し、それをデータの入力として使用する方法をどのように見つければよいかということです。

これは、チャートのバージョンを作成している場所の実際の例です。 http://goo.gl/XHela

ランダム データを生成するコードは次のとおりです。

function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random(), 
        y: random(), 
        size: Math.random(), 
        shape: shapes[j % 6]
      });
    }
  }

  return data;
}

あなたの応答の前に、次のコードを使用して、関数 randomData の結果をページに出力しようとしました (同じものを変更しました)。

    function see(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random(), 
        y: random(), 
        size: Math.random(), 
        shape: shapes[j % 6]
      });
    }
  }

data.toString();
var x=document.getElementById("demo");
x.innerHTML=data;
}

しかし、ページでは、出力は [object Object],[object Object],[object Object],[object Object] です。

フォローアップの質問は、生成されたデータではなく、このグラフに自分のデータを使用するにはどうすればよいですか?

4

1 に答える 1

1

dataChrome で Chrome デベロッパー ツールのコンソールを使用してコードをステップ実行すると、 がどのように構造化されているかを確認できます。上でリンクしたページ (最初のリンク)Ctrl + Shift + Cで、Windows またはCommand + Shift + cOSX で を押すと、このウィンドウが表示されます。[ソース] をクリックしscatter.js、左側のファイル リストからファイルを見つけます。次の行にブレーク ポイントを設定しますreturn data。ページを参照してください。コードの実行はその行で一時停止します。コンソールに移動して、 と入力しdataます。dataチャートに使用される が出力されます。構造をブラウズして、それがどのように作成されたかを理解することができます。

最後に次のように表示されるはずです。

コンソールのスクリーンショット。

于 2013-03-20T17:49:24.890 に答える