Javascript 为什么我的<；路径>；我的d3折线图上没有出现线条？

为什么我的线条没有出现在线条图上

我正在尝试使用d3创建一个折线图，有两个y轴和一个x轴。 但是，当我尝试在图形中添加一条线时，会收到错误消息

d3.v5.min.js:2错误：属性d:预期的moveto路径命令（'M'或'M'），“函数a（a）{va..”

我假设

d3.line（）

没有返回有效的“M”命令

以下是：

我的小提琴：

我认为是哪里出了问题

 svg.append("path")
      .datum(covidLine)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", (d,i) =>{

        let lines = createLine.y(d => yScaleCovid(d[1][i]))
        .x(d => xScaleDates( d[0][i] ))

        return lines
      }
      )

---

行生成器需要定义x和y，在本例中是您的日期和covidCase，例如

let createLine = d3.line()
.y(data => yScaleCovid(data["covidCases"]))
.x(data => xScaleDates(data["dates"]))

其次，需要对阵列进行排列，以便阵列中的每个元素都表示线上的一个点，例如：

let covidLine = []

dates.forEach(function(d,i){
  let obj = {}
  obj.dates = d
  obj.covidCases = covidCases[i]
  covidLine.push(obj)
})

最后，线条的创建可以简单地称为：

svg.append("path")
  .datum(covidLine)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", createLine)

---

这是jsiddle的更新版本：

行生成器需要定义x和y，在本例中是日期和covidCase，例如

let createLine = d3.line()
.y(data => yScaleCovid(data["covidCases"]))
.x(data => xScaleDates(data["dates"]))

其次，需要对阵列进行排列，以便阵列中的每个元素都表示线上的一个点，例如：

let covidLine = []

dates.forEach(function(d,i){
  let obj = {}
  obj.dates = d
  obj.covidCases = covidCases[i]
  covidLine.push(obj)
})

最后，线条的创建可以简单地称为：

svg.append("path")
  .datum(covidLine)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", createLine)

这是您的JSFIDLE的更新版本：