长格式数据d3中的多行图表

Question

我想在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和比改变颜色，但我想知道是否有办法使用这个数据结构而不必这样做？

Answer 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); });