Создание линии с другим форматом данных

Question

Я пытаюсь сделать несколько строк с этим форматом данных:

var data3 = [ 
    { "task": "Estructura", "data": [{"x":new Date(Date.parse("2014-01-03")),"y":0}, {"x":new Date(Date.parse("2014-03-09")),"y":8}] }, 
    { "task": "Mamposteria", "data": [{"x":new Date(Date.parse("2014-02-01")),"y":0}, {"x":new Date(Date.parse("2014-03-01")),"y":8}] }, 
    { "task": "Friso",  "data": [{"x":new Date(Date.parse("2014-03-01")),"y":0}, {"x":new Date(Date.parse("2014-03-30")),"y":8}] }, 
    { "task": "Mortero",  "data": [{"x":new Date(Date.parse("2014-05-01")),"y":8}, {"x":new Date(Date.parse("2014-07-01")),"y":0}] }, 
    { "task": "Pisos",  "data": [{"x":new Date(Date.parse("2014-07-01")),"y":8}, {"x":new Date(Date.parse("2014-09-01")),"y":0}] } 
]; 

И этот код для генерации строки:

var colors = [ 
    'steelblue', 
    'green', 
    'red', 
    'purple', 
    'black' 
] 

var xScale = d3.time.scale() 
    .domain([ 
     new Date(Date.parse('2014-01-01')), 
     new Date(Date.parse('2014-12-31')) 
    ]) 
    .range([0, width]); 

var yScale = d3.scale.linear() 
    .domain([0, 8]) 
    .range([height, 0]); 

var line = d3.svg.line() // line generator 
    .interpolate("linear") 
    .x(function(d) { return xScale(d.data.x); }) 
    .y(function(d) { return yScale(d.data.y); });  

var activities = svg.selectAll('.line') 
    .data(data3) 
    .enter() 
    .append("path"); 

var activitiesAttibutes = activities 
    .attr("class", "line") 
    .attr('stroke', function(d,i){ 
    return colors[i%colors.length]; 
    }) 
    .attr("d", line) 
    .attr("transform", "translate(15,30)"); 

, но я m возникает проблема, потому что это не массив из двух элементов.

Должен ли я упорядочивать данные по-другому или вносить изменения в генератор функций линии? Не могли бы вы привести мне пример, где я могу это решить?

Answer 1

Есть две вещи, которые нужно изменить здесь - вам нужно перебрать data массива в каждом объекте для линии, и вы должны изменить аксессоров так, что они относятся к одному объекту в data массиве:

var line = d3.svg.line() // line generator 
    .interpolate("linear") 
    // d is a single object in a data array 
    .x(function(d) { return xScale(d.x); }) 
    .y(function(d) { return yScale(d.y); });  

, а затем применить линию, вы воздействующий на объект верхнего уровня, так что вам нужно пройти в data массива:

var activitiesAttibutes = activities 
    .attr("d", function(d) { 
    return line(d.data); 
    }); 

Смотрите скрипку: http://jsfiddle.net/h07s5jc5/1/