I want to make a canvas and <svg> element inside a <div>, but it does not show up, even in the element inspector.
HTML
<body>
<script type="text/javascript" src="/js/main.js"></script>
<div class="container">
<div class="top-container">
<div class="title"></div>
<div class="source"></div>
<div class="logo"></div>
</div>
<div class="middle-container">
<div class="tooltip-container"></div>
</div>
<div class="bottom-container"></div>
</div>
</body>
Javascript
// set the dimensions and margins of the graph
var width = 454;
var height = 400;
// append the svg object to the body of the page
var svg = d3.select(".bottom-container")
.append("svg")
.attr("width", 454)
.attr("height", 465)
.append("circle")
.attr("cx",25)
.attr("cy",25)
.attr("r",25)
.style("fill", "purple");
When I change the d3.select(".bottom-container") to d3.select(".any-class") it is not working, but when I change it to d3.select("body") it worked—the <svg> and the <circle> elements show up in both browser and element inspector.
