2

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 ?

Danny
  • 1,078
  • 7
  • 22
  • 5
    In your first code snippet, the `#animviz` element is not defined at the time, when d3 tries to access it - hence there is no reaction. If you just swap the ` – Sirko Jul 15 '15 at 15:11
  • 1
    @Sirko thanks ! Thats the solution !! – Danny Jul 15 '15 at 15:21

1 Answers1

2

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>