D3.js 基本文法

JavaScript

使う機会が発生したのでメモ。

D3.jsの組み込み

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

基本操作

# DOM要素を指定して変数に代入
# bodyの中に、属性wisth,heightを持ったsvgタグを生成

var dataset = [11,62,23,54,33,51,32,16];
var w = 1000;
var h = 300;
var svg = d3.select("body").append("svg").attr({width: w, height: h});

# DOM要素を指定して編集. 存在していないタグも指定可能 (後でappendとかする)
# 1つだけのときはselect
# 複数あるときはselectAll

svg.selectAll("rect")
            .data(dataset) // datasetを結びつける
            .enter()            // 今回の場合、rectタグすべて
            .append("rect") // タグの生成
            .attr({                 // 属性の設定
                x: padding,
                y: function(d,i){ return i * 25 ;},
                width :function(d) { return xScale(d) - padding;},
                height: 20,
                fill: "red"
            })
            .on("click", function(d){ alert(d);});  // イベントの設定

アニメーション

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .transition()               // アニメーションの設定
    .delay(function(d, i){    // 要素間の時間間隔の設定
        return i * 300;
    })
    .duration(1000)  // 何秒かけてするか
    .ease("bounce") // 要素の指定位置への着地の仕方
    .each("start", function(){  // コンストラクタみたいなもの
        d3.select(this).attr({    // 今回の場合、このthisはcircleにあたる
            fill: "green",
            r: 0,
            cy: h
        });
    })
    .attr({
        cx: function(d, i){ return 50 + (i * 100); },
        cy: h/2,
        r: function(d){ return d;},
        fill: "red"
    })
    .each("end", function(){ // デストラクタみたいなもの
        d3.select(this)
            .transition()
            .duration(1000)
            .attr({
                fill: "blue",
                r: 0,
                cy : 0
            });
    });

コード全体

htmlファイル

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title></title>
   <link rel="stylesheet" href="">
   <style>
        .axis path
        .axis line {
            fill: none;
            stroke: black;
        }
        .axis text {
            font-size: 11px;
        }
    </style>
</head>
<body>

    <button id="update">データ更新</button>

    <svg id="myGraph" width="1000" height="200">
        
    </svg>

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

    
</body>
</html>

jsファイル

// 初期化
var padding = 20;
var svg = d3.select("#myGraph");
var update = d3.select("#update");
var w = svg.attr("width");
var h = svg.attr("height");


d3.csv("./test.csv", function(error, data){
    var dataset = [];
    for(var i=0; i<data.length;i++){
        dataset.push(data[i].item1);
    }
    console.log(dataset);
    var xScale = d3.scale.linear()
                    .domain([0,Math.max.apply(null,dataset)])
                    .range([padding,w - padding])
                    .nice();

    var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom");

    svg.append("g")
        .attr({
                class: "axis",
                transform: "translate(0,150)"
            })
        .call(xAxis);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr({
            x: padding,
            y: function(d,i){ return i * 25; },
            width: function(d){return xScale(d) + "px";},
            height: 20,
            fill: "red"
        })
        .on("mouseover", function(d){
                d3.select(this).attr("fill","orange");
            })
        .on("mouseout", function(d){
                d3.select(this).attr("fill","red");
            });
});

参考