многострочная диаграмма в 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 

Я хотел бы сделать различные линии для каждого Темы, но окрашено Group. Я попытался положить это в формат 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); });