将D3图插入CMS中的div

Question

I'm using Bludit CMS to build a simple website. The only task I could handle is to add a D3 Graph into the site. My Graph and the code looks pretty like this: http://bl.ocks.org/mbostock/1093130

The graph is displayed at the position, where I insert the script tag of the graph. The problem is, that I'm not able to add a script tag in Bludit CMS, only HTML. Now, I thought about adding an empty div tag with an id to my CMS editor like

<div id="myGraph">
</div>

and add the graph programmatically to this div. How can I do that? One further note: I want to try to do it only with Javascript without using jQuery. I don't want to include jQuery to my page only to add a graph to my website.

Answer 1

If you can't add JavaScript to a page you won't be able to use D3.

If you can load in code from an external file then use:

<script src="myfile.js"></script>

If you can only add it to every page rather than just one then check for your id and then execute the code.

if( d3.select("#myGraph") ) {
   var svg = d3.select("#myGraph")
         .append( "svg")
         .attr("width", 1000)
         .attr("height", 1000);

   // Do stuff with SVG.
}