8

次のような形式のJSONファイルがあります。

{
   "John":{
      "name":"John",
      "counts":[ 1, 5, 10, 6 ]
   },
   "Steve":{
      "name":"Steve",
      "counts": [ 6, 4, 50, 40 ]
   }
}

左側に名前ラベルを付けて、これらのカウントの単純な縦棒グラフを作成するD3視覚化を実行しようとしています。単一のデータ系列と名前がある場合、次のように実行できます。

svg.selectAll("rect").data([ 1, 5, 10, 6 ]).enter().append("rect")
            .attr("x",function(d,i) { return i*columnWidth; })
            .attr("y",function(d) { return (rowHeight-scale(d));})
            .attr("width",columnWidth)
            .attr("height",function(d) { return snowScale(d); } );

svg.selectAll("text").data("John").enter().append("text")
        .text(function(d) { return d; })
        .attr("x",nameBuffer)
        .attr("y",function(d,i) { return rowHeight; })              
        .attr("font-size", "14px");

これは、データが直接提供され、左側にテキストラベルがあり、各データポイントに同じ幅の一連の列がある単一の行に対して機能します。しかし、私はD3を始めたばかりであり、各オブジェクトをループしてそれぞれに新しい行を作成し、毎回垂直オフセットを追加する何かをチェーンする方法を一生理解することはできません。

さまざまなネストされた値と配列インデックスを保持しながら、ループしてファイル内の各オブジェクトのを作成し、各行のテキストと列を作成するにはどうすればよいですか？

4

1 に答える 1

7

目的を達成するための鍵は、ネストされた選択を使用することです。アイデアは、データ オブジェクト全体を最初のレベルに渡し、要素の SVG グループを作成することです。これらの要素のそれぞれに対して、実際の視覚化が現在行っていることと同様の方法で追加されます。

ネストされた選択に関するマイクのチュートリアルをご覧ください。.data(d.counts)現在ハードコードされているデータ呼び出しを、たとえばの代わりにそれぞれの要素に置き換えることを忘れないでください.enter([1, 5, 10, 6])。

于 2012-12-27T23:50:34.437 に答える