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

d3中具有长格式数据的多线图表

1 个答案: