折线图自定义X值访问器

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

如果您分配路径的"d"属性

.attr("d", line) 

line(d)最终得到呼吁，其中d是其数据的每个元素。预计d是一组点。

既然你嵌套在一个对象数组，你需要自行提供，其抽出balance阵列功能：

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