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

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>