如何根据信息表绘制动态折线图？

Question

我想使用 d3.js 基于信息表绘制动态折线图。我已将信息表中的信息转换为两个数组：一个一维数组xValueArray: [0, 10, 20, 30, 40]和一个二维数组yValueArray: [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]]。我的逻辑是，我可以获得一个数据集，其中 xValueArray 映射到 yValueArray 中的两个数组以表示 x 和 y 坐标。因此，我使用了map函数来制作数据集。

    var result = xValueArray.map(function (x, i) { 
        return [x, yValueArray[0][i]];
    });
    console.log(result); //returns [[0,0], [10,20], [20,30], [30,40], [40, 50]]

    var data = result.map(function(d) {
        return {
          x: d[0],
          y: d[1]
        };
    });
    console.log(data); //returns [[x:0, y:0], [x:10, y:20], [x:20, y:30], [x:30, y:40], [x:40, y:50]]

    //************* Plotting of graph ***************   
    var lineFunction = d3.line()
        .x(function(d) {return x(d.x); })
        .y(function(d) {return y(d.y); })
        .curve(d3.curveLinear);

    //plot line
    var path1 = g.append("path")
        .attr("class", "path1")
        .attr("id", "blueLine")
        .attr("d", lineFunction(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .attr("clip-path", "url(#clip)");

折线图将被绘制得很好，只有 一个 线被绘制，因为我只将 yValueArray 中的第一个数组映射到 xValueArray。但是，我想让图表动态，这意味着我希望根据用户在信息表中输入的数据字段的数量来绘制折线图。在这种情况下，数据字段的数量为 2，因为 yValueArray 中有 2 个数组。如果数据字段的数量增加，yValueArray 中的数组数量也会增加，我必须在折线图上绘制相应的线。

我该怎么做呢？非常感谢任何帮助！

Answer 1

不要使用 x 数组作为映射 y 值的基础，而是反过来：

const yValueArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValueArray = [0, 10, 20, 30, 40];

const data = yValueArray.map(data =>
  data.map((d, i) => ({
    x: xValueArray[i],
    y: d
  }))
);

console.log(data);

这适用于您在yValueArray 上拥有多少个内部数组。

然后在您的输入选择中使用该数据：

const yValueArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValueArray = [0, 10, 20, 30, 40];

const data = yValueArray.map(data =>
  data.map((d, i) => ({
    x: xValueArray[i],
    y: d
  }))
);

const x = d3.scaleLinear();
const y = d3.scaleLinear();

const lineFunction = d3.line()
  .x(function(d) {
    return x(d.x);
  })
  .y(function(d) {
    return y(d.y);
  })
  .curve(d3.curveLinear);

const path1 = d3.select("svg").selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", lineFunction)
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="400"></svg>