Using d3.js to create an SVG at several divs

Viewed 7816

Suppose I have some HTML which looks like:

<html>
<body>
<div class = "a"></div>
...
<div class = "a"></div>
...
<div class = "a"></div>
...
</body>
<html>

where the ...'s are just paragraphs or other code.

Problem: I'd like to be able to use d3.js to append an SVG at each of these div's.

For example, let's say I want to make a rectangle like:

var svg = ((SOMETHING GOES HERE!))
          .append("svg")
          .attr("width", w)
          .attr("height", h);

var sep = svg.selectAll("rect")
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 100)
      .attr("height", 10)

How can I use the selectors on the first line to do this? I've tried selectall() and select() with various "div.a", ".", etc., things, but nothing seems to work.

1 Answers
Related