CODEWITHSUNDEEP
javascripthtmld3.jssvg
Gilman
Gilman

Reputation: 574

Append SVG canvas to element other than body using D3

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.

Upvotes: 21

Views: 20190

Answers (1)

Zikes
Zikes

Reputation: 5886

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.

Upvotes: 23

Related Questions