Question

I am trying to merge two d3.js examples into a single html file, which I have put in dropbox. For reference, the two examples are A and B.

In order to merge the two files, I had to use CSS classes and call them from javascript. The CSS:

circle.a { stroke: #fff; }
circle.b { fill: none; stroke-width: 1.5px; }

Unfortunately, I am having trouble calling CSS classes from D3:

var svg = d3.select("body").append("svg:svg")
svg.append("svg:circle[class=a]")
...
var svg = d3.select("body").selectAll("svg")
svg.append("circle[class=b]")

More practically, I may like to have several d3 images running on the same page. It could be in a different way than above.

@Moderators: Feel free to move to a different part of StackExchange that may fit better.

Answer 1

Did you try:

 svg.append("svg:circle").attr("class","circle.a")

You can also define attributes specific to this operation with the attr function without having to create a CSS file (but it easily gets messy