时间戳

首页 > 解决方案 > 如何在 D3 Js 中将 y 轴（yDomain）值设置为最大值

javascript - 如何在 D3 Js 中将 y 轴（yDomain）值设置为最大值

问题描述

在我的 D3 图表中，如何设置yDomain为最大值。有什么建议么 ？如果我们看到nov 10我的line并且area正在开箱即用。

我的代码沙箱在这里

在此处输入图像描述

我正在分别计算 yDomainMagnitude 和 yDomainStartupMagnitude 的两个域，但现在如何合并或合并两者并分配给 yDomain。

   var yDomainMagnitude = d3.extent(data, function(d) {
      return d.magnitude;
    });

    var yDomainStartupMagnitude = d3.extent(data, function(d) {
      return d.startupMagnitude;
    });

    var yDomain = yDomainStartupMagnitude; // here I have to have union of both and assign.

    var xScale = d3
      .scaleTime()
      .range([0, width])
      .domain(xDomain);
    var yScale = d3
      .scaleLinear()
      .range([height, 0])
      .domain(yDomain);

标签： javascriptd3.js

解决方案

由于您的函数中有一个关系条件，它总是会取较大的值。您可以改为分别计算 和 的两个域startupMagnitude，magnitude然后合并范围（分别取最小和最大范围值的最小值和最大值）。

const magnitude = d3.extent(data, d => d.magnitude);
const startup = d3.extent(data, d => d.startupMagnitude);
const yDomain = [
    d3.min([magnitude[0], startup[0]]),
    d3.max([magnitude[1], startup[1]])
];

或者，一个单一的分配版本，利用你只是联合范围：

const yDomain = d3.extent([
    ...d3.extent(data, d => d.magnitude), 
    ...d3.extent(data, d => d.startupMagnitude)
]);

还有一个是先合并数据，然后计算范围：

const yDomain = d3.extent([
    ...data.map(d => d.magnitude), 
    ...data.map(d => d.startupMagnitude)
]);

这些不会将 D3 计算 min/max/extent 的方式与 / 的不同语义混合，例如。如果数组为空，则处理字符串、空值和结果。在这方面，最后一个版本是最忠实于 D3 方式的，因为它使用了单个.Math.minMath.maxd3.extent

推荐阅读