Javascript d3 react js-未能对“文档”执行“CreateElements”：提供的限定名包含无效字符“，”

我正在尝试使用组件方法创建d3折线图：

import React, {Component} from "react";
import {observer, inject} from "mobx-react";

import {line, select} from "d3"

@inject("store")
@observer
class PriceChart extends Component {
  constructor(props) {
    super(props)
    this.createLineChart = this.createLineChart.bind(this)
  }
  componentDidMount() {
    this.createLineChart()
  }
  componentDidUpdate() {
    this.createLineChart()
  }
  createLineChart() {

    const data = [
      {
        price: 100
      }, {
        price: 200
      }
    ]

    const node = this.node

    const priceLine = line().x((d) => 1).y((d) => d.price)

    select(node).append(priceLine(data))
  }
  render() {
    return <svg ref={node => this.node = node} width={800} height={800}></svg>
  }
}

export default PriceChart;

但我得到了以下错误：

未能对“文档”执行“CreateElements”：限定名称 如果“M1100L1200”包含无效字符“，”

那么M1，L1的值从哪里来？d3似乎在向数据中添加导致错误的值

这个

const priceLine = line().x((d) => 1).y((d) => d.price)

。。。这是一个线路发生器

因此，它所做的是：如果您传递给它一个给定的数据数组

priceLine(data)

。。。它返回一个包含path命令的字符串。像这样：

"M1,100L1,200"

因此，将此字符串作为SVG元素追加没有什么意义

解决方案：

这里需要附加一个path元素，并将该字符串设置为其d属性。因此，它应该是：

select(node).append("path")//append a path here
    .attr("d", priceLine(data))//and set its d attribute

---

似乎时间戳不被认为是d3图表上使用的有效数字，这就是为什么你gr@Pineda我试着对我的输入进行一些处理-将所有价格更改为固定数字，将所有时间戳更改为unix时间戳，然后将x函数更改为始终返回1，但我总是得到这个错误的一些变体-包含无效字符“，”。@Pineda将问题编辑为一个更简单的示例，taht仍然显示了这个问题