javascript - 在间接引用的任意数量的列中找到 Y 轴缩放的最大值

Question

我在 d3 中有一个工作的多线时间序列图表(处理不同日期的持续时间(以分钟为单位))。我已经编写了路径代码，以便可以在数据集中返回任意数量的列，从而导致绘制的线条数量更少或更多(使用间接引用)。我现在正在尝试使用数据集中第 0 列以外的任何数据值来缩放 Y 轴。返回的第一列被假定为时间刻度。

我有这个用于缩放线:

y.domain([0, d3.max(data, function (d) { return d.Overall; })]);

但是，我引用的是我知 Prop 有总体处理持续时间的特定列，因此缩放有效，但我不想按名称引用数据，而是按位置引用数据:第 0 列以外的任何柱状数据。

我还可以通过以下方式间接引用同一列:

y.domain([0, d3.max(data, function (d) { return d[headers[7]]; })]);

我真正想做的是完全不包括整体处理时间列并执行如下操作:

y.domain([0, d3.max(data, function (d) { return Math.max(d[headers[1]], d[headers[2]], d[headers[3]], d[headers[4]], d[headers[5]], d[headers[6]] ); })])

但是，我不想指定数组索引，因此可以通过 d3.max() 计算任意数量的列。

关于如何做到这一点有什么想法吗？也许是以下的一些变体:

return for (var i = 1; i < headers.length; i++) { aHeaders[i-1] = d[headers[i]]; }

Answer 1

当您使用 d3.csv 加载数据时，会创建一个名为 columns 的数组属性，您可以使用它来获取所有列名。

例如:

const csv = `foo,bar,baz,foobar,foobaz
1000,345,54,22,34
25,87,123,43,65
17,98,222,88,76`;

const data = d3.csvParse(csv, d3.autoType);

console.log(data.columns)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.0/d3.min.js"></script>

在您的情况下，您不需要名称，但该属性对于获取 CSV 中的列数很有用。考虑到这一点，您可以使用嵌套的 d3.max，如下所示:

const max = d3.max(data, function(d) {
  return d3.max(d3.range(1, data.columns.length, 1).map(function(e) {
    return d[data.columns[e]]
  }))
});

此处，d3.range(1, data.columns.length, 1) 获取除第一个索引 (0) 之外的所有索引。您也可以将它用作常量，这样就不需要为每一行都计算它。

这是演示:

const csv = `foo,bar,baz,foobar,foobaz
1000,345,54,22,34
25,87,123,43,65
17,98,222,88,76`;

const data = d3.csvParse(csv, d3.autoType);

const columnIndices = d3.range(1, data.columns.length, 1);

const max = d3.max(data, function(d) {
  return d3.max(columnIndices.map(function(e) {
    return d[data.columns[e]]
  }))
});

console.log(max)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.0/d3.min.js"></script>

如您所见，第一列被忽略了。对于其他情况，只需用您想要的索引填充 columnIndices 数组。