javascript - 在 d3 中加载多行数据的默认格式是什么？

Question

我正在尝试使用 d3 创建多折线图。我可以在 Controller 中以任何格式操作我的数据并将其传递给图形，但不确定 d3 接受的默认格式或最佳实践是什么。示例非常不同，并且使用不同的方法使用不同形式的条目，例如:

文件阅读器:

 csv()
 tsv()
 col1,col2,col3
 x1,y1,y2,...
 x2,y1,y2,...

或对象数组:

[
    {key:"col1",value:[[x1,y1],[x2,y2],...]},
    {key:"col2",value:[[x1,y1],[x2,y2],...]},
]

或

 [ 
 { label: "col1", 
    x: [x1, x2, x3,...], 
    y: [y1, y2, y3,...] }, 
 { label: "col2", 
    x: [x1, x2, x3,...], 
    y: [y1, y2, y3,...] } 
 ] ;

还有很多其他格式...

但基本上我正在寻找一种默认格式，我可以将多系列数据传递给 d3，而图表代码中的数据操作量较少。我只想将准备好的数据传递给 d3。

Answer 1

而不是回答“在 d3 中加载多行数据的默认格式是什么？”，这是非常模糊和明显基于意见的(因为没有默认格式)，我将只解释一些连接数据的基本 D3 原则。

数据方法 (selection.data()) 接受 3 个东西:

• 一个数组
• 一个函数
• 没有

因此，我们将使用数组来存储多行数据。

现在是重要的部分:线生成器本身使用一个数组来绘制路径。根据 API，d3.line :

Generates a line for the given array of data.

因此，这是最简单的多行格式:

[//outer array
    [...],
    [...],
    [...]
    //inner arrays, one for each line
]//closing the outer array

这些内部数组可以包含对象甚至其他数组(每个数组有两个值，一个用于 x 位置，另一个用于 y 位置)。

例如，包含对象的内部数组:

var data = [
    [{x:0, y: 0},{x:50, y: 40},{x:100, y: 100},{x:150, y: 90},{x:200, y: 150}],
    [{x:0, y: 50},{x:50, y: 60},{x:100, y: 100},{x:150, y: 110},{x:200, y: 10}],
    [{x:0, y: 20},{x:50, y: 20},{x:100, y: 140},{x:150, y: 130},{x:200, y: 10}]
];

并包含数组:

var data = [
    [[0, 10],[50, 20],[100, 30]],
    [[0, 80],[50, 10],[100, 40]],
    [[0, 50],[50, 120],[100, 90]]
];

由于这是最简单格式之一，它可能适合您，因为您说:“我正在寻找一种默认格式，我可以使用更少的数据操作”。

您只需要创建一个输入选择，如下所示:

var lines = svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", lineGenerator)

行(路径)的数量是内部数组的数量。对于每一行(路径)，相应的内部数组作为数据传递。

这是一个演示:

var data = [
[{x:0, y: 0},{x:50, y: 40},{x:100, y: 100},{x:150, y: 90},{x:200, y: 150},{x:250, y: 140},{x:300, y: 130}],
[{x:0, y: 120},{x:50, y: 60},{x:100, y: 100},{x:150, y: 110},{x:200, y: 90},{x:250, y: 10},{x:300, y: 30}],
[{x:0, y: 20},{x:50, y: 20},{x:100, y: 140},{x:150, y: 130},{x:200, y: 10},{x:250, y: 70},{x:300, y: 90}]
];
var svg = d3.select("svg");
var color = d3.scaleOrdinal(d3.schemeCategory10)
var lineGenerator = d3.line()
  .x(function(d) {
    return d.x
  })
  .y(function(d) {
    return d.y
  })

var lines = svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", function(d, i) {
    return color(i)
  })

svg {
  border: 1px solid darkgray;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

人们如何根据数据(例如，CSV 或 TSV)创建这些嵌套数组？那是一个不同的问题。正如 in the comments 所建议的，最常见的方法(但不是唯一的方法)是使用 d3.nest()。