Question

我正在尝试使用d3.js，React和PatternFly 4创建一个简单的折线图。我制作了其他与select id配合使用的图形，但是该图形拒绝工作，我无法放入手指问题。

请注意，调用此类时已经创建了ID，因此在进行选择时它就存在。

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中还是个菜鸟，这段代码几乎是在线示例中的复制粘贴，但有一些调整。

Answer 1

我有同样的问题。我通过将svg的所有代码放入函数中来使其工作，然后在componentDidMount（）中调用了它

d3.select适用于主体，但不适用于id。我想念什么？

1 个答案: