I got a problem by using d3js within a blog post.
I have successfully done the installation like this
copy d3.min.js to /content/themes/[theme name]/assets/js/
and adding
<script src="{{asset "js/d3.min.js"}}" charset="utf-8"></script>
into
/content/themes/[theme name]/default.hbs
Btw: It was important to add this into the <head> part!
and
If I am adding a <script> into my Markdown blog post, I don't get any expected result/action
<script>
var svg = d3.select("#animviz")
.append("svg")
.attr("width", w)
.attr("height", h);
// some additional code you can find below
</script>
<div id="animviz">
</div>
I also tried to write self executing functions surround this JS:
(function(){
// the hole code
})();
No success.
The only thing works, is to include the hole code in the Ghost-Settings->Code Injection-> Blog Footer:
<script src="https://gist.githubusercontent.com/blablarnab/7621762/raw/0fc10237392911e12c4641c44cdd63066573430b/caterpillar.js"></script>
That works if I add the target <div id="animviz"></div> into the blog posts Markdown.
Any ideas ? I assume it is a markdown parser problem. A possible solution would be to have a way to append code to the DOM (blog footer) out of a blog post and refresh the code. But how ? location.reload(); will also be dead like d3js I think ?
The parser tries to execute the code within the blog post itself. So it will do this step by step. Because the JS part comes first in your post, there is no valid target and nothing happens. If you would add console.log() to your code, you will see, it is executed - but not into the target, because it isn't there at this time.
For that reason you need to place your target <div id="animviz">
</div> BEFORE the <script>// your JS</script> like this:
<div id="animviz">
</div>
<script>
var svg = d3.select("#animviz")
.append("svg")
.attr("width", w)
.attr("height", h);
// some additional code you can find below
</script>