Question

我正在尝试使用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],...]},
]

或

 [ 
 { 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：

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

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

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

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

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

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()。

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

1 个答案: