代码之家 › 专栏 › 技术社区 › james

如何在d3.js中获取数据集中给定范围之间的最小值和最大值

crossfilter d3.js

james · 技术社区 · 7 年前

我有一个数据集的格式是:

[{
  x: "2014-01-01",
  y: 1223 
},
 ...
 {x: "2017-01-01",
  y: 143
 }
 ];

给定一个范围,例如

["2015-01-01","2016-01-01"]

我想找出这两个范围之间的最小和最大y值。

我在D3怎么做?

目前,我使用以下函数来查找最小值/最大值

d3.min(formattedData, function(d) { return d.y; }), 

d3.max(formattedData, function(d) { return d.y; });

我不知道该如何应用这个范围

日期已经被解析了所以不用担心那部分

我对所有x值应用以下函数,即parseDate.parse(x)

parseDate = d3.time.format('%Y-%m-%d');

2 回复 | 直到 7 年前

Mark 7 年前

如果您的列表非常长,并且您不想将其循环多次,则可以在一次调用中执行以下操作:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    var input = [{
        x: new Date("2014-01-01"),
        y: 1223
      }, {
        x: new Date("2015-06-01"),
        y: 12
      }, {
        x: new Date("2015-07-01"),
        y: 1025
      }, {
        x: new Date("2015-08-01"),
        y: 125
      }, {
        x: new Date("2017-01-01"),
        y: 143
      }],
      minDate = new Date("2015-01-01"),
      maxDate = new Date("2016-01-01");

    var minMax = d3.extent(input, function(d) {
      if (d.x <= minDate || d.x >= maxDate){
        return NaN;
      }
      return d.y;
    })
    console.log(minMax);
  </script>
</body>

</html>

Xavier Guihot 7 年前

您可以从数组中筛选元素以适应所需的日期范围:

inputArray.filter(d => d.x > "2015-01-01" && d.x < "2016-01-01")

然后,可以映射(转换)过滤元素,将其转换为关联的y值:

.map(d => d.y)

要最终获得结果数组的最小值或最大值,请执行以下操作:

d3.min(..)

它给出:

var input = [
  {
    x: "2014-01-01",
    y: 1223 
  },
  {
    x: "2015-06-01",
    y: 12
  },
  {
    x: "2015-07-01",
    y: 1025
  },
  {
    x: "2015-08-01",
    y: 125
  },
  {
    x: "2017-01-01",
    y: 143
  }
 ]

var output = input
  .filter(d => d.x > "2015-01-01" && d.x < "2016-01-01")
  .map(d => d.y);

console.log("filter/map array: " + output);
console.log("min: " + d3.min(output));
console.log("max: " + d3.max(output));

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

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

7 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

7 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

7 年前

MTT · 最适合散点图的回归

7 年前

Cyley Simon · 以chile/name格式将Csv转换为json

7 年前

Himani · 线图和面积图之间的颜色不同

7 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

7 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

7 年前