WordPress の記事に D3 で作ったグラフを挿入する

WordPress に D3 で作ったグラフを挿入する

wp-d3 というプラグインを使って d3 で作ったグラフを載せてみました。 使い方などをここに示しておきます。

プラグインをインストール

WPのダッシュボード > プラグイン > 新規追加 > 「wp-d3」で検索 > インストール！

記事にグラフを載せる

適当に新規で記事を作ります。
ここで「WPD3」のボタンを押します。

すると新たにウィンドウが開かれます。
ここにD3のコードを書いていきます。

今回作ったコードは下記のようなものです。
ただの黒い円ですね。

var svg = d3.select('.wpd3-18850-0')
    .append('svg')
    .attr({
        width: 500,
        height:500
    });
 
svg.append('circle')
    .attr({
        cx:150,
        cy:150,
        r:80,
        fill: "black"
    });

コードを書き終わったら「insert」を押し、「save」を押し保存します。
「insert」を押すことで記事に下記のようなタグが埋め込まれます。

これはさっき開かれたウィンドウのタブに振られていた番号です。（わかりにくいので下記の画像の赤い部分です）

これで記事を見てみると…

できてたー！簡単ですね！
ただ、d3 のバージョンがこのプラグインに内包されているものに依存してしまうためあまり凝ったものは載せれないかも… ちなみに d3 は3系で、wordpress は4系です。