2

D3 を使用して、x 軸が序数である散布図を作成しようとしています。これの小さな例をhttp://plnkr.co/edit/c7iy6T?p=previewで見ることができるはずです。

私の最初の注文の質問は次のとおりです。「クラスター」を移動して、序数ラベルの上に配置するにはどうすればよいですか。

私の2番目の質問は次のとおりです。jsonがあった場合

{x : 1.1, y : 1.9  ,label : foo}
{x :  .9, y : 2.2  ,label : foo}
{x : 2.1, y : 1.2  ,label : bar}
{x : 1.9, y : 5.3  ,label : bar}

データが線形スケールの散布図と同じようにプロットされている間に、ラベルが本質的に整数値 1,2 の上に配置されるように、それを散布図に表示する最も慣用的な方法は何でしょうか。

編集：

2 番目の質問は、次のことに関するものです。クラスタ mi は、x 座標が整数 m を中心に「中心」になることを知っているため、M 個のクラスタを持つことができます。上記のように、すべての foo 値は他のどの整数よりも 1 に近かった。上記のような構造で渡せるようにしたいです。出力を典型的なxyプロットにしますが、整数の目盛りは抑制され、ラベルのみが表示されます。

Lars、以下の回答は私の値を中心にしていますが、他のスケールを無視し、x 値を線のように圧縮しているようです。これはhttp://plnkr.co/edit/ncANkH?p=previewで見ることができます。Lars ソリューションは理想的ですが、圧縮の問題には適していません。

4

1 に答える 1

2

2 番目の質問について (私が正しく理解している場合)、グループ化されたグラフを作成するために一般的に使用されるのと同じ種類のロジックを使用できます (この例のように)。基本的に、2 つの X スケールを作成します。1 つは各散布図のドットを内部的に配置するためのもので、もう 1 つは散布図自体をステージ上に配置するためのものです。

ラッパー (序数) スケールのrangeはステージの幅になりますがrange、内部 (線形) スケールの は になりますx.rangeBand()。個々の散布図をtransformそれぞれ描画し、ラッパー スケールに従ってそれぞれを個別に描画します。

これを行うには、個々の散布図が独自のオブジェクトを持つように、データをより整理された形式にする必要があります。私はあなたが望むものを達成すると思うこのPlunkを作りました. (ちょっと見苦しいですが、Plunk サイトは私には耐えられないほど遅かったので、美学をあきらめました。)

これがどのように達成されたかについて、2 つの点に注意してください。まず、データを次の形式に再配置しました。

var data = [
{
  name: 'baby',
  values: []
},
{
  name: 'adult',
  values: []
},
{
  name: 'youth',
  values: []
}

]

次に、この最上位データをバインドして 3 つの SVGgグループを描画し、次のようにキー関数を使用して第 2 レベルのデータを円にバインドします。

dotGroups.selectAll('.dot')
   .data(function(d) { return d.values; })

それが役立つことを願っています。

于 2013-06-10T03:49:04.020 に答える