如何在 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 方法，

    var yDomainMagnitude = d3.extent(data, function(d) {

        return d.magnitude;

    });

    var yDomainStartupMagnitude = d3.extent(data, function(d) {

        return d.startupMagnitude;

    });

    var max =

        d3.max(d3.values(yDomainMagnitude)) >

        d3.max(d3.values(yDomainStartupMagnitude))

            ? d3.max(d3.values(yDomainMagnitude))

            : d3.max(d3.values(yDomainStartupMagnitude));

    var min =

        d3.min(d3.values(yDomainMagnitude)) <

        d3.min(d3.values(yDomainStartupMagnitude))

            ? d3.min(d3.values(yDomainMagnitude))

            : d3.min(d3.values(yDomainStartupMagnitude));

    var yDomain = [min, max];