Menu
Is it possible to append an SVG canvas to an element other than <body> using D3.js if the script is not inside that element?
For example, the code below does not work:
<html>
<body>
<script src="../../d3.v2.js"></script>
<script>
var vis = d3.select("#container")
.append("svg:svg")
.attr("width",w)
.attr("height",h);
</script>
<div id="container"></div>
</body>
All examples I have seen use d3.select("body").append.... but clearly we don't always want to append the canvas immediately to the body.
I found that if the <script> is inside the container div then I can use d3.select("#container") but it seems strange to me that I would have to include my script inside of the specific container(s) where I want the canvas.
211
The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. We can create a group element with D3. js by appending a g element using any selection.
SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
D3 charts are most often rendered using SVG, a retained mode graphics model, which is easy to use, but performance is limited. SVG charts can typically handle around 1,000 datapoints. Since D3 v4 you've also had the option to render charts using canvas, which is an immediate mode graphics model.
You're trying to select #container before it exists. You'll need to put your code in an onload or move the script below #container in the page.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
