【WordPress/Cocoon/Javascript/プログラム初心者】D3を記事上で使う方法

D3をSagasoon.

今回は、前回使った WordPress / Cocoonでの javascriptライブラリ利用方法を用いたサンプルをご紹介します。

なんてことはない見た目ですが、簡単に D3 が使えるようになるのはとても面白いかと思います。

まずは、前回の記事をご覧いただけてない方は、一度、お目通しください。

【Cocoon/WordPress】手軽にグラフを書いてみる(準備編）

Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。プログラム初心者の方にもとても有意義かなと思います。

【Cocoon/WordPress】手軽にグラフを書いてみる(実践編）

Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。プログラム初心者の方にもとても有意義かなと思います。

Amazonで詳細を見る

ご紹介するサンプルはこんな感じです
やり方
1. 出力する場所にタグを仕込む
D3の処理を入れる
プログラム初心者の方は
まとめ

ご紹介するサンプルはこんな感じです

簡単なサンプルです。
現在の時間を取得して、バーを時間/分/秒のバーを表示するだけのもの。
こんな感じです。

やり方

手順は２つです。

出力する場所にタグを仕込む
D3で描画をかける

出力する場所にタグを仕込む

簡単です。
空のタグを入れ込むだけです。

<div id="time_bar"></div>

Amazonで詳細を見る

D3の処理を入れる

CocoonのカスタムJavascript欄に、下記のソースを入れ込みます。

var script = document.createElement("script");
script.src = "https://d3js.org/d3.v5.min.js";
var head = document.getElementsByTagName("head");
head[0].appendChild(script);

script.onload = function(){
        var data = [];
        setInterval(function(){
          var now = new Date();
          data[2] = now.getSeconds()/60*100;
          data[1] = now.getMinutes()/60*100;
          data[0] = now.getHours()/24*100;
          var time_bar_data = d3.select("#time_bar").selectAll("div").data(data);
          time_bar_data .enter().append("div").merge(time_bar_data).style("width", function(d) { return d  + "%"; }).text(' ');
        }, 1000);
};

カスタムCSSに、下記を入れておいてください。

#time_bar div {
  font-size: 12px;
  background-color:#ff9999;
  padding:1px;
  height:10px;
}

これで、にょきにょきと、バーが動き出します。

プログラム初心者の方は

毎度のお話ですが、プログラム初心者の方は、このソースをいじり倒すといいです。

【プログラム初心者さん必見】初心者がする勉強の仕方はこれ

４月からの新人さんを多くみてきた私が思うんですが、プログラム初心者さんは勉強する意欲はあるんですよね。でも、その方向を間違うと、「あー、プログラムってめんどくさい」とか「いらいらする」とかの塊になってしまいます。今日は、そんな間違いをしないためのちょっとした秘訣をお伝えします。

まとめ

いかがだったでしょうか。
１つ、javascriptを使う方法を覚えると、色々違う場面で利用できます。
プログラム初心者の方は特にそうですが、改造しまくってくださいね。

それではまた！

Amazonで詳細を見る