D3.js 事始め(1)まずはサンプルコードをコピペしてブラウザで開いてみる

  • 10
    Like
  • 0
    Comment

(教材ウェブサイトへのリンク) KATSUMI TAKANO氏 「D3.jsの簡単な使い方とまとめ」

ref.png

サンプルコードをテキストファイルに、貼り付け

教材ウェブサイトから、下記のスクリプトをテキストファイルに貼り付け

【ファイル名】 index.html

D3.js はダウンロードせずに、スクリプト中の以下の箇所で、直接アクセスしている

script src="http://d3js.org/d3.v3.min.js" charset="utf-8"

D3.jp
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>D3.jsのひな形</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
        var dataset = [100, 150, 200, 250, 300];
        var svg = d3.select("body").append("svg").attr({
        width: 500,
        height: 300
        });

    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
        x: 0,
        y: function(d, i){ return i * 30; },
        width: function(d, i){ return d; },
        height: 20,
        fill: "green"
    })

    </script>
</body>
</html>

1.png

ブラウザで開いてみる

棒グラフが表示された! :kissing_heart:

2.png

jQuery とか使ったことない 超入門者でもわかる親切な教材ウェブサイト 】

(リンク先) ドットインスクール D3.js入門(動画 全17回)