Wordpress の記事にD3.jsで作ったグラフ等を埋め込むプラグイン「WP-D3」

WP-D3

インストール

「プラグイン」メニューの「新規追加」から「WP-D3」を検索してインストールしてください。

WP-D3

使い方

プラグインをインストールすると、記事投稿画面のビジュアルエディタにWP-D3のアイコンが追加されます。

WP-D3

アイコンをクリックすると入力ホームが表示されるので、そこにJavaScriptを書きこむだけです。

WP-D3

タブ名がD3.jsを使って描画を行うdiv要素のクラス名になっているので、それをselectしsvg要素を追加するなどして使います。

例えば今回の場合、タブ名は「wpd3-3567-0」なので、そこに赤いcircle要素を表示するサンプルは以下のようになります。

var svg = d3.select('.wpd3-3567-0')
	.append('svg')
	.attr({
		width: 300,
		height:300
	});

svg.append('circle')
	.attr({
		cx:150,
		cy:150,
		r:80.
		fill, "red"
	});

var svg = d3.select('.wpd3-3567-0')

.append('svg')

.attr({

width: 300,

height:300

});

svg.append('circle')

.attr({

cx:150,

cy:150,

r:80.

fill, "red"

});

余談

デバッグはちょっとメンドウです。

WP-D3

WordPress の記事にD3.jsで作ったグラフ等を埋め込むプラグイン「WP-D3」

インストール

使い方

余談

投稿者: shimizu