1

d3で複数の折れ線グラフを作成したいと思います。私が見たほとんどの例では、ワイドフォーマットデータを使用しています。私のデータは、ワイドフォーマットで許可されるよりも複雑で、複数のグループ化構造があります。各被験者は複数日で採点され、治療群に属します。次に例を示します。

Subject Score Time Group
Sub1    19.0  1    1
Sub1    19.0  2    1
Sub2    18.9  1    1
Sub2    19.1  2    1
Sub3    20.7  1    2
Sub3    19.5  2    2

件名ごとに異なる行を作成したいのですが、グループごとに色分けされています。これをJSON形式に変換してみました。これは次のようになります。

[{"Subject" : "Sub1", "Score":"19.0", "Time":"1", "Group" : "1"} ...]

データをワイドに変換し、各svgパスを個別に追加し、各svgを個別に選択して色を変更することはできると思いますが、それを行わずにこのデータ構造を操作する方法があるかどうか疑問に思いました。

4

1 に答える 1

1

データの構造をまったく変更する必要はないようです。d3.nest()必要に応じて、d3 のデータを再構築するために使用できます。コードは次のようになります (モジュロ スケール)

var nested = d3.nest()
               .key(function(d) { return d.Subject; })
               .entries(data);
var line = d3.svg.line()
             .x(function(d) { return d.Time; })
             .y(function(d) { return d.Score; });
svg.selectAll("path").data(nested).enter()
   .append("path")
   .attr("fill", function(d) { return color(d.values[0].Group); })
   .attr("d", function(d) { return line(d.values); });
于 2013-03-20T20:22:21.640 に答える