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

我正在尝试用d3创建一个多折线图。我可以在控制器中以任何格式操作数据并将其传递到图形，但不确定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],...]},
]

或

还有很多其他格式

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

我将不回答“d3中加载多行数据的默认格式是什么？”，这是一个非常模糊且基于观点的问题（因为没有默认格式），而是解释一些连接数据的基本d3原则

数据方法（

selection.data（）

）接受3件事：

• 阵列
• 函数
• 没什么

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

现在是重要的部分：直线生成器本身使用数组来绘制路径。根据API：

为给定的数据数组生成一行

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

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

这些内部数组可以包含对象，甚至可以包含其他数组（每个数组都有两个值，一个用于

x

position，另一个用于

y

position）

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

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]]
];

因为这是最简单的格式之一，它可能适合您，因为您说过：“我正在寻找一种默认格式，我可以通过较少的数据操作将多系列数据传递给d3”

您只需创建一个enter选择，如下所示：

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

行数（路径数）是内部数组的数目。对于每一行（路径），相应的内部数组作为数据传递

下面是一个演示：

var数据=[
[{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.选择（“svg”）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
var lineGenerator=d3.line（）
.x（功能（d）{
返回d.x
})
.y（功能（d）{
返回d.y
})
var lines=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“路径”）
.attr（“d”，线路生成器）
.attr（“填充”、“无”）
.attr（“笔划宽度”，3）
.attr（“笔划”，功能（d，i）{
返回颜色（一）
})

svg{
边框：1px实心暗光；
}

将每个变量作为JSON中的一个点传递

[{x:1；y:2；group:a}，{x:2；y:4；group:B}…]

，用任意键嵌套数据（group by），并从嵌套的数据对象中绘制线条。编辑：如果您使用R（或不使用R），我发现本教程很有用：。祝你好运@谢谢你的回答。我不知道这里是什么组织？！为什么是y2和y4？为了提供更多信息，我想在一个读取数据的循环中附加多行。不通过为每个不同的Y值在数据集上循环来添加每一行。A组跟随一行，B组跟随另一行，但两者都有x和Y值。您可以以我向您展示的JSON格式发送此数据-这些值是任意的。另外，请看教程-这些线是在一个循环中绘制的。谢谢你的回答。有一个问题，为什么要将

null

传递给

svg.selectAll（null）

？我在这里写了一个完整的解释：

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