d3.select 适用于身体，但不适用于 id。我错过了什么？答案

【问题标题】：d3.select works on body, but not on id. What am I missing?d3.select 适用于身体，但不适用于 id。我错过了什么？
【发布时间】：2019-05-24 15:29:38
【问题描述】：

我正在尝试使用 d3.js、React 和 PatternFly 4 制作一个简单的折线图。我已经制作了其他图表，这些图表与 select 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 中的菜鸟，这段代码几乎是从在线示例中复制粘贴的，有一些调整。

【问题讨论】：

把这个放在开头：console.log(d3.select('#linechart').size())
返回 1。我已经使用 React 中的 createRef() 使其工作，但我仍然想知道这里发生了什么。
我总是将我的 d3 代码放在 componentDidMount 部分，而不是 render 部分。这样，在渲染部分中定义的 DOM 中任何你想要的东西，在 d3 命中它时就已经存在了。以这种方式组织代码也更容易。我意识到这并不能回答您的问题（除非您的 return 语句的 id 应该是#linechart），但仍然有用。

标签： javascript reactjs d3.js patternfly

【解决方案1】：

我遇到了同样的问题。我通过将 svg 的所有代码放在一个函数中来让它工作，然后我在 componentDidMount() 中调用它

【讨论】：