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 回答