时间戳

首页 > 解决方案 > 在间接引用的任意数量的列中找到 Y 轴缩放的最大值

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

问题描述

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

我有这个用于缩放线：

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

但是，我引用了一个我知道具有整体处理持续时间的特定列，因此缩放有效，但我不想按名称引用数据，而是按位置：第 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]]; }

标签： javascriptd3.js

解决方案

当您加载数据时，会创建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对于其他情况，只需使用您想要的索引填充数组。

推荐阅读