用途
新着
履歴
言語

d3.js 棒グラフ

d3.js 棒グラフ
d3.js 棒グラフ

棒グラフはなんだかんだよく使われます。

スタイルシートで成形することも可能ですが、今回はd3.jsを使って、データをもとにグラフを作成したサンプルです。

描画はSVGになります。アニメーションを付けていますが、外すことも可能です。

実行結果はこちら

d3.jsを使うのではじめに読み込みを記述します。

<script src="https://d3js.org/d3.v5.min.js"></script>

d3.jsは最新のものを使うようにすることと、バージョンによって使えなくなる関数があるので、

エラーが出た場合は、推奨される代案を探しましょう。

以下のJSはやや長いので説明をいれています。

var dataset = [
    ['サンプル',6],
    ['コピペ',8],
    ['デモ',2],
    ['事例',5]
];

var W = 180;
var H = 100;
var BAR_W = 30;
var BAR_YOHAKU = 1;
var W_YOHAKU = 25;
var H_YOHAKU = 10;

var svg = d3.select("#demoarea")
            .append("svg")
            .attr("width", W)
            .attr("height", H + H_YOHAKU * 2 + 80);
            //高さと余白と下のラベル文字の高さを確保

// スケール
var scale = d3.scaleLinear()
            .domain([0, 10]) //データの範囲
            .range([0, H]);  //高さの範囲

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // i番目のdはデータ
      return i * (BAR_W + 5) + W_YOHAKU + 5;
      // i * (BAR_W + 棒の右の余白分) + W_YOHAKU + 最初の棒の左の余白分;
    })

    // アニメーションのために追加
    .attr("height", 0)  // 高さ0
    .attr("width", BAR_W)  // 
    .attr("y", H + H_YOHAKU)  // yが0
    .transition()  // アニメーションする
    .duration(500)  // ミリ秒かけて以下の状態にする
    .delay(function(d, i) {
      return i * 100;  // アニメーションの開始をミリ秒ずつずらす
    })
    // アニメーション終わり

    .attr("y", function(d, i) {
      // 開始点を全体高さから高さを引いた値とする
      return H - scale(d[1]) + H_YOHAKU;
    })
    .attr("width", BAR_W)
    .attr("height", function(d) {
      // データ配列の1コ目を高さとする
      // scale関数により10を100と変換する
      return scale(d[1]);
    })
    // グラフの色設定
    .attr("style", "fill:#8888FF");

// グラフの値を棒近くに配置
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
      return d[1];
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return i * (BAR_W + 5) + 20 + W_YOHAKU;
    })
    .attr("y", function(d) {
      return H - scale(d[1]) - 5 + H_YOHAKU;
    })
    .attr("font-size", "10px")

    // アニメーションのために追加
    .attr("fill", "#FFFFFF")
    .transition()  // アニメーションする
    .duration(1000)  // ミリ秒かけて以下の状態にする
    .delay(function(d, i) {
      return i * 200;  // アニメーションの開始をミリ秒ずつずらす
    })
    // アニメーション終わり

    .attr("fill", "#111188");

// 縦軸のメモリ追加
var yScale = d3.scaleLinear()
              .domain([0, 10])
              .range([H, 0]);

var axis = d3.axisLeft()
            .scale(yScale)
            .ticks(4);


svg.append("g")
    .attr("transform", "translate(" + W_YOHAKU + "," + H_YOHAKU + ")")
    .attr("class", "axis")
    .call(axis);

// 横軸の線を追加
svg.append("rect")
    .attr("width", W - W_YOHAKU)
    .attr("height", 1)
    .attr("x", W_YOHAKU)
    .attr("y", H + H_YOHAKU);

// 横軸の下のデータテキストを配置
svg.selectAll(".x_text")
  .data(dataset)
  .enter()
  .append("text")
  .attr("class", "x_text")
  .attr("x", function(d, i) {
    return i * (BAR_W + 5) + 20 + W_YOHAKU;
  })
  .attr("y", H + H_YOHAKU + 5)
  .text(function(d, i) {
    return d[0];
  });

スタイルはこちら。

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
    /* 枠線のぼかしをなくす */
}
.axis text {
    font-size: 11px;
}

.x_text {
   writing-mode: vertical-rl;
   /* 縦書き */
   font-size: 10px;
}

数字を書き換えて見るとすぐにカスタマイズが可能です。

公開 : 2019-08-12 15:54:27
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top