Question

我在博文中使用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-＆gt; Code Injection-＆gt;中加入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？

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

Ghost - 嵌入式JavaScript不会触发d3js

1 个答案: