Ghost - 嵌入式 JavaScript 不会触发 d3js答案

【问题标题】：Ghost - Embedded JavaScript doesn't trigger d3jsGhost - 嵌入式 JavaScript 不会触发 d3js
【发布时间】：2015-07-15 15:08:27
【问题描述】：

我在一篇博文中使用 d3js 时遇到了问题。

我已经成功完成了这样的安装

将 d3.min.js 复制到 /content/themes/[主题名称]/assets/js/

并添加

<script  src="{{asset "js/d3.min.js"}}"   charset="utf-8"></script>

进入

/content/themes/[主题名称]/default.hbs

顺便说一句：将其添加到<head> 部分很重要！和

如果我在我的 Markdown 博客文章中添加 <script>，我不会得到任何预期的结果/操作

<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>

我还尝试围绕这个 JS 编写自执行函数：

(function(){  
 // the hole code  
})();

没有成功。

唯一可行的方法是在 Ghost-Settings->Code Injection-> Blog Footer 中包含 the hole code：

<script src="https://gist.githubusercontent.com/blablarnab/7621762/raw/0fc10237392911e12c4641c44cdd63066573430b/caterpillar.js"></script>

如果我将目标 <div id="animviz"></div> 添加到博客文章 Markdown 中，这将有效。

有什么想法吗？我认为这是一个降价解析器问题。一种可能的解决方案是有一种方法将代码附加到博客文章中的 DOM（博客页脚）并刷新代码。但是如何？我认为location.reload(); 也会像 d3js 一样死掉？

【问题讨论】：

在您的第一个代码 sn-p 中，#animviz 元素当时未定义，当 d3 尝试访问它时 - 因此没有反应。如果您只是将<script> 元素交换到<div> 后面，它应该可以工作。
@Sirko 谢谢！这就是解决方案！

标签： javascript d3.js ghost-blog ghost

【解决方案1】：

解析器尝试在博客文章本身中执行代码。所以它会一步一步地进行。因为 JS 部分首先出现在您的帖子中，所以没有有效的目标，也没有任何反应。如果你将 console.log() 添加到你的代码中，你会看到，它被执行了——但没有被执行到目标中，因为此时它不存在。

因此，您需要将目标 <div id="animviz"> </div> 放在 <script>// your JS</script> 之前，如下所示：

<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>

【讨论】：