d3はJSの反応 - 「ドキュメント」on「にはcreateElementNS」の実行に失敗しました：提供修飾名が無効な文字が含まれています「」

Question

私はコンポーネントメソッドでは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; 

しかし、私は次のエラーが発生しています：

Failed to execute 'createElementNS' on 'Document': The qualified name provided ('M1,100L1,200') contains the invalid character ','..

ここから値M1、L1はどこから来ますか？ d3がエラーの原因となっているデータに値を追加しているようですか？

Answer 1

この...

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

... ラインジェネレータです。

したがって、どのようなことがないことはこれです：あなたはそれを渡すと、与えられたデータ配列...

priceLine(data) 

...それはコマンドパスを持つ文字列を返します。このように：

"M1,100L1,200" 

したがって、この文字列をSVG要素として追加するのはほとんど意味がありません。

ソリューション：

あなたがここに欲しい何がパス要素を追加することであり、そのd属性としてこの文字列を設定します。したがって、それは次のようになります。

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