d3.select works on body, but not on id. What am I missing?

Question

I'm trying to make a simple line chart with d3.js, React and PatternFly 4. I have made other graphs who works as intented with the select id, but this one refuses to work and I can't put my finger on the issue.

Note that the id is already created when this class is called, so it exists when the select occurs.

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>
);

I'm quite the noob in d3.js right now, this code is pretty much a copy paste from an example online with a few ajustements.

Answer 1

I had the same problem. I got it working by putting all the code for the svg in a function, then I called it in componentDidMount()