Generating simple SVGs using D3 in rails 4

Question

Having had a lot of trouble trying to generate a more complicated D3 chart on a simple rails app show page I have tried to simplify the problem. I am now just trying to generate a circle in an SVG element using JavaScript read from my application.js file.

Despite a lot of searching around and fiddling with the code my SVG element doesn't seem to be getting appended to. I have tried loading the javascript once the page has loaded (should that be once the DOM has loaded?) but so far no luck...

So far I have:

show.html.erb

...

<svg width="300" height="300">
</svg>

...

application.js

...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.turbolinks
//= require d3
//= require_tree .

....

$(document).on('ready page:load', function () {
//Make an SVG Container
var svgContainer = d3.select("body").append("svg")
                                 .attr("width", 200)
                                 .attr("height", 200);
//Draw the Circle
var circle = svgContainer.append("circle")
                      .attr("cx", 30)
                      .attr("cy", 30)
                     .attr("r", 20);
});

I can see that the javascript is being loaded here and the equivolent code works fine using in-line JavaScript on a simple html file.

Can anyone point me in the right direction?

Thanks for your help!

Graeme

Answer 1

In case this helps anyone I ended up getting this work by selecting a block element that contained the SVG element rather than the body element. I ended up with:

...

<div id='graph'>
<svg width="300" height="300">
</svg>
</div>

...

And

... 

var svgContainer = d3.select("#graph").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

...

Which fixed all my problems...

As I mention above I didn't have any problem using .select(body) in a plain html page, just on my rails show page.

Cheers