使用 D3.js 在最小值和最大值之间生成二维数组答案

【问题标题】：Generating two dimensional array between min and max number using D3.js使用 D3.js 在最小值和最大值之间生成二维数组
【发布时间】：2018-01-05 14:50:25
【问题描述】：

我是 D3.js 的新手，所以请多多包涵。下图显示了我要绘制的内容，它是在 Excel 中创建的。每个物体都有这条美丽的曲线。

我根据这个公式得到了这条平滑线。我将获得 X 的 Alpha 、Beta 和 max 的参数，基于此我必须使用下面的公式找到 y -> y=Alpha(1-2.71828*(-Beta*x)) 并且 x 必须是生成的数字从最小 100 到消费金额，以 100 递增。

在 Excel 中，我可以像这样生成 X 的数字并为每个找到 y

100     1.28E-01
200     0.256638873
300     0.384674585
400     0.51252152
500     0.640179956
600     0.76765017
700     0.894932441
800     1.022027046
900     1.14893426
1,000   1.275654361
1,100   1.402187624
1,200   1.528534325

但是在 JS 中基于以下内容，如何生成 X，它应该在 0 到花费的数量之间增加 100，并且它应该创建二维数组以便为每个对象提供 X、Y。例如，如果 min 为 0，max 为 20000，如何生成 min 和 max 之间以 100 递增的数组？

如何根据生成的 X 计算 Y？您能否给我一些指导，以便使用 D3.js 创建这个二维数组来绘制这条线？

name    alpha        beta       max_x_val   spend
BAN1    140.3       3.86E-05    28,675.00   29,919.00
BAN2    115.31      2.08E-05    32,302.00   28,367.00
BAN3    5.07E-05    19,740.00   16,972.00
ADJ4    91.8        0.000029119 25,855.00   27,112.00
ADJ5    90.3        2.81E-05    25,793.00   23,883.00

我可以使用下面的代码画线，效果很好，前提是我可以为每个对象创建二维数组。

$( document ).ready(function() {
   var bezierLine = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; })
    .interpolate("basis");

var svg = d3.select("#bezier-demo")
    .append("svg")
    .attr("width", 300)
    .attr("height", 150);

svg.append('path')
    .attr("d", bezierLine([ [0.1, 0.13], [0.2, 0.26], [0.3, 0.38], [0.4, 0.51], [0.5, 0.64], [0.6, 0.77]]))
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .transition()
        .duration(2000)
        .attrTween("stroke-dasharray", function() {
            var len = this.getTotalLength();
            return function(t) { return (d3.interpolateString("0," + len, len + ",0"))(t) };
        });
});

【问题讨论】：

标签： javascript arrays excel d3.js svg

【解决方案1】：

您正在寻找的是d3.range() 函数。它会产生一个算术级数，通过简单的.map()，您可以将其增强为二维数组：

var lineData = d3.range(0, spend, 100)
     .map(x => [ x, alpha * (1 - 2.71828 * (-beta * x))] );

【讨论】：