Линейный график Пользовательский X Value Accessor

Question

Я пытаюсь нарисовать линейную диаграмму. Следующий массив не является типичными данными, которые вы передадите d3js, поэтому я знаю, что мне нужно написать пользовательскую функцию для доступа к правильным данным, таким как .x(function(d) { return xScale(parseDate(d.date)) }). Это работает для массива массивов с объектами, но я не могу заставить его работать для массива объектов с массивом значений с объектами (см. balance). Как это написать? И есть ли лучшая документация для написания этих аксессуаров? Я не смог найти последовательный и исчерпывающий ресурс.

var test_accounts = [ 
{name: "test1", 
balance: 
[ 
    {date: "2014-07-15", y: 20}, 
    {date: "2014-07-15", y: 10}, 
    {date: "2014-07-16", y: 40}, 
    {date: "2014-07-16", y: 10}, 
    {date: "2014-07-17", y: 4}, 
    {date: "2014-07-17", y: 10}, 
    {date: "2014-07-18", y: 30}, 
    {date: "2014-07-18", y: 10}, 
    {date: "2014-07-19", y: 10}, 
    {date: "2014-07-19", y: 10}, 
    {date: "2014-07-20", y: 0}, 
    {date: "2014-07-20", y: 10}, 
    {date: "2014-07-21", y: 10}, 
    {date: "2014-07-21", y: 10}, 
    {date: "2014-07-22", y: 80}, 
    {date: "2014-07-22", y: 10} 
]}, 
{name: "test2", 
balance: 
[ 
    {date: "2014-07-15", y: 50}, 
    {date: "2014-07-15", y: 30}, 
    {date: "2014-07-16", y: 70}, 
    {date: "2014-07-16", y: 20}, 
    {date: "2014-07-17", y: 40}, 
    {date: "2014-07-17", y: 50}, 
    {date: "2014-07-18", y: 10}, 
    {date: "2014-07-18", y: 30}, 
    {date: "2014-07-19", y: 60}, 
    {date: "2014-07-19", y: 40}, 
    {date: "2014-07-20", y: 10}, 
    {date: "2014-07-20", y: 60}, 
    {date: "2014-07-21", y: 80}, 
    {date: "2014-07-21", y: 50}, 
    {date: "2014-07-22", y: 90}, 
    {date: "2014-07-22", y: 20} 
]} 
]; 

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

// draw the line 
var drawline = svg.selectAll("svg") 
    .data(line1node).enter() 
    .append("path") 
    .attr("d", line) 
    .attr("class", "line") 
    .attr("stroke", function(d, i) { return linecolors(i); }) 
    .attr("stroke-width", 2) 
    .attr("fill", "none") 
    .attr("transform", "translate(0,0)"); 

Примечание: Это только фрагмент кода, так что я ушел из масштаба и оси, так как я знаю, что эти работы отлично.

Answer 1

Где вы присвоить атрибут Path в "d"

.attr("d", line) 

line(d) заканчивает тем, что вызывается для каждого элемента, где d является его точка привязки. Ожидается, что d будет массивом точек.

Поскольку вы вложен массив в объекте, необходимо вместо поставить функцию, которая извлекает balance массив:

.attr("d", function(d) { return line(d.balance); })