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

Question

在我的 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);

Answer 1

由于您的函数中有一个关系条件，它总是会取较大的值。你可以代替分别计算出两个结构域为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方式不同的语义的Math.min/ Math.max，例如。如果数组为空，则处理字符串、空值和结果。在这方面，最后一个版本最忠实于 D3 方式，因为它使用单个d3.extent.

Answer 2

有几种方法可以计算yDomain到位。您的显然有效，但可以显着简化：var yDomain = [  d3.min(data, d => Math.min(d.magnitude, d.startupMagnitude)),  d3.max(data, d => Math.max(d.magnitude, d.startupMagnitude))];对于任何数据点，此方法分别使用/来检查任何值magnitude或startupMagnitude更小/更大。然后利用并计算这些值的全局范围。Math.min()Math.max()d3.min()d3.max()

Answer 3

这就是我分别计算启动幅度和幅度的两个域的方式，然后比较最大值和最小值并创建 yDomain。我不确定这是正确的还是有任何其他 d3 方法，&nbsp; &nbsp; var yDomainMagnitude = d3.extent(data, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.magnitude;&nbsp; &nbsp; });&nbsp; &nbsp; var yDomainStartupMagnitude = d3.extent(data, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.startupMagnitude;&nbsp; &nbsp; });&nbsp; &nbsp; var max =&nbsp; &nbsp; &nbsp; &nbsp; d3.max(d3.values(yDomainMagnitude)) >&nbsp; &nbsp; &nbsp; &nbsp; d3.max(d3.values(yDomainStartupMagnitude))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? d3.max(d3.values(yDomainMagnitude))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : d3.max(d3.values(yDomainStartupMagnitude));&nbsp; &nbsp; var min =&nbsp; &nbsp; &nbsp; &nbsp; d3.min(d3.values(yDomainMagnitude)) <&nbsp; &nbsp; &nbsp; &nbsp; d3.min(d3.values(yDomainStartupMagnitude))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? d3.min(d3.values(yDomainMagnitude))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : d3.min(d3.values(yDomainStartupMagnitude));&nbsp; &nbsp; var yDomain = [min, max];