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); })

折线图自定义X值访问器

1 个答案: