сюжетные точки на несколько строк в линейной диаграмме

Question

Я пытаюсь построить небольшие круги на линии для представления точек данных в виде графика, используя следующий код:

// Add the scatterplot 
    g.selectAll("dot") 
    .data(newdata[0].values) 
    .enter().append("circle") 
    .attr("r", 5) 
    .attr("cx", function(d) { 
     return x(d.date); 
    }) 
    .attr("cy", function(d) { 
     return y(d.value); 
    })    
    //.attr("stroke", "blue") 
    //.attr("stroke-width", 2) 
    //.attr("fill", "none") 
    .on("mouseover", function(d) { 
     div.transition() 
     .duration(200) 
     .style("opacity", .9); 
     div.html(formatTime(d.date) + "<br/>" + d.value) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY - 28) + "px"); 
    }) 
    .on("mouseout", function(d) { 
     div.transition() 
     .duration(500) 
     .style("opacity", 0); 
    }); 

Но проблема в том, что я могу только передать значения одного элемента за один раз: .data(newdata[0]).values). Это будет отображать только точки на одной строке. Я могу поместить весь код в цикл и использовать счетчик i вместо 0. Но это будет очень плохое решение. Ниже моя структура данных:

[{ 
    "id": "primary", 
    "values": [{ 
    "date": "2011-03-31T18:30:00.000Z", 
    "value": 58.13 
    }, { 
    "date": "2011-04-30T18:30:00.000Z", 
    "value": 53.98 
    }] 
}, { 
    "id": "secondary", 
    "values": [{ 
    "date": "2011-03-31T18:30:00.000Z", 
    "value": 28.13 
    }, { 
    "date": "2011-04-30T18:30:00.000Z", 
    "value": 35.13 
    }] 
}]; 

Here is the JSFiddle.

Пожалуйста, посоветует, что делать! :)

Answer 1

Как насчет уплощения ваших данных первого с помощью reduce:

var values = newdata.reduce(function(arr, d){ 
    return arr.concat(d.values); 
}, []); 

Это даст вам множество всех объектов, которые нужны построить очки:

[{"date":"2011-03-31T18:30:00.000Z","value":58.13}, 
{"date":"2011-04-30T18:30:00.000Z","value":53.98}, 
{"date":"2011-03-31T18:30:00.000Z","value":28.13}, 
{"date":"2011-04-30T18:30:00.000Z","value":35.13}] 

Тогда, конечно, просто привяжите эти значения, чтобы создать все ваши круги:

g.selectAll("dot") 
.data(values) 
... // etc