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>パーツに追加することが重要でした! と

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

失敗。

the hole codeGhost-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>BEFOREに配置する必要があります。<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 に答える