2

我在博客文章中使用 d3js 时遇到了问题。

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

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

并添加

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

进入

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

顺便说一句：将其添加到<head>零件中很重要！和

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

<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  
})();

没有成功。

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

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

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

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

4

1 回答 1

2

解析器尝试在博客文章本身中执行代码。所以它会一步一步地做到这一点。因为 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>
于 2015-07-15T15:26:49.660 回答