0

d3.js、React、および PatternFly 4 を使用して単純な折れ線グラフを作成しようとしています。選択 ID で意図したとおりに動作する他のグラフを作成しましたが、これは動作を拒否し、指を置くことができません問題。

id は、このクラスが呼び出されたときに既に作成されているため、select が発生したときに存在することに注意してください。

render() {

### This only works if I replace "#linechart" by "body"
var svg = d3.select("#linechart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", valueline);

svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

svg.append("g")
        .call(d3.axisLeft(y));
return ( 
   <div id={"#" + this.props.id}></div>
);

私は今のところd3.jsの初心者です。このコードは、オンラインの例からいくつかの調整を加えたコピーペーストです。

4

1 に答える 1

0

私も同じ問題を抱えていました。svgのすべてのコードを関数に入れて機能させ、それをcomponentDidMount（）で呼び出しました

于 2019-06-11T20:18:39.793 に答える