Javascript 动态绘制线时出错_Javascript_D3.js

Javascript 动态绘制线时出错

javascript d3.js

Javascript 动态绘制线时出错,javascript,d3.js,Javascript,D3.js,我有一个包含多个时间序列的数据文件，我想使用Javascript/D3将它们全部绘制在一个图形中。我对Javascript/D3相当陌生，但在搜索了一些示例之后，我终于找到了一个几乎可以做到这一点的代码。还有一个问题，即当我尝试初始化并动态绘制线条对象时，我面临一个奇怪的问题我下面的三个代码文件包含一个带有两个系列的MWE。在charts.js中，我加载了一些数据（日期列和两个系列）。我以两种方式初始化行对象：第一种是硬编码（例如line1=d3.svg.line（）），第二种是将它们分配到一

我有一个包含多个时间序列的数据文件，我想使用Javascript/D3将它们全部绘制在一个图形中。我对Javascript/D3相当陌生，但在搜索了一些示例之后，我终于找到了一个几乎可以做到这一点的代码。还有一个问题，即当我尝试初始化并动态绘制线条对象时，我面临一个奇怪的问题

我下面的三个代码文件包含一个带有两个系列的MWE。在charts.js中，我加载了一些数据（日期列和两个系列）。我以两种方式初始化行对象：第一种是硬编码（例如

line1=d3.svg.line（）

），第二种是将它们分配到一个数组中（例如

allLines[0]=d3.svg.line（）

），允许对序列进行动态初始化。我尝试将线条渲染为

// Version 1: Harcoded lines
allPaths[0].attr('d', line1);
allPaths[1].attr('d', line2);   
allPaths[1].style("stroke", "red")

// Version 2: Lines from array
allPaths[0].attr('d', allLines[0]);
allPaths[1].attr('d', allLines[1]);   
allPaths[1].style("stroke", "red")

第1版工作得很好，两行都显示为它们应该显示的样子。然而，在执行版本2中的行时，我遇到了一个奇怪的问题：当运行line

allpath[0].attr（'d'，allLines[0]）执行在代码中以某种方式跳回到对象被分配到所有行中的部分（至少在调试模式下是这样）。然后抛出一个未定义对象/变量错误，脚本无法执行。对我来说，这毫无意义。此外，allLines[0]
和line1
似乎是等价的，所以我无法理解为什么它们不会产生相同的结果
总之，有人知道是什么导致了这种奇怪的行为吗？我还愿意采用其他方法获得所需结果，即能够动态绘制数据文件中的所有序列
main.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>D3 Line Chart</title>
  <link rel="stylesheet" href="style.css"> 
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
  <div id="chart"></div>
  <script src="chart.js"></script>
</body>
</html>

你有问题。测线生成器功能中的i
不是您认为的i

我将把这个问题（有很多好的答案）联系起来，而不是写一个冗长的解释，我希望你仔细阅读：
也就是说，这应该是您的循环：
allLines = [];
for (let i = 0; i < 2; i++) {
    let thisName = lineNames[i].name;
    allLines[i] = d3.svg.line()
        .x(function(d) {
            return x(new Date(parseDate(d.date)))
        })
        .y(function(d) {
            return y(d[thisName])
        });
};

正文{
字体：12px无衬线；
保证金：0；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}


body {
  font: 12px sans-serif;
  margin: 0;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

allLines = [];
for (let i = 0; i < 2; i++) {
    let thisName = lineNames[i].name;
    allLines[i] = d3.svg.line()
        .x(function(d) {
            return x(new Date(parseDate(d.date)))
        })
        .y(function(d) {
            return y(d[thisName])
        });
};