D3.js v4/v5 範囲選択 (d3.brush) 使い方

2018-03-252022-10-03

D3の範囲選択の使い方を紹介します。サンプルデモでは表示されているグレーの四角をドラッグするか、グラフ上の何もないところをクリック&ドラッグして範囲選択できます。グレーの四角の隅をドラッグすると範囲の大きさを変更できます。

サンプルデモ

サンプルプログラム

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>D3 Brush</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <!-- 1. 選択時のスタイル設定 -->
  <style>
  .selected {
    fill: red;
    stroke: brown;
  }
  </style>
  <script>
  // 2. 散布図の表示
  var width = 800; // グラフの幅
  var height = 600; // グラフの高さ
  var margin = { "top": 30, "bottom": 30, "right": 30, "left": 30 };

  var randomX = d3.randomUniform(0.5, 10);
  var randomY = d3.randomNormal(0.5, 0.12);
  var data = d3.range(500).map(function() { return [randomX(), randomY()]; });

  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width - margin.right - margin.left]);

  var yScale = d3.scaleLinear()
    .domain([0, 1])
    .range([height - margin.bottom - margin.top, 0]);

  var dot = g.append("g")
    .attr("fill-opacity", 0.2)
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d[0]) })
    .attr("cy", function(d) { return yScale(d[1]) })
    .attr("r", 5);

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
    .call(d3.axisBottom(xScale));

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.axisLeft(yScale));

  // 3. brushの設定
  var brush = d3.brush()
    .extent([
      [0, 0],
      [width - margin.left - margin.right, height - margin.top - margin.bottom]
    ])
    .on("start brush", brushed);

  g.append("g")
    .call(brush)
    .call(brush.move, [
      [xScale(2), yScale(0.8)],
      [xScale(5), yScale(0.3)]
    ]);

  function brushed() {
    var x0 = xScale.invert(d3.event.selection[0][0]);
    var y1 = yScale.invert(d3.event.selection[0][1]);
    var x1 = xScale.invert(d3.event.selection[1][0]);
    var y0 = yScale.invert(d3.event.selection[1][1]);
    dot.classed("selected",
      function(d) {
        return(x0 <= d[0] && d[0] <= x1) && (y0 <= d[1] && d[1] <= y1);
      }
    );
  }
  </script>
</body>

<!DOCTYPE html>

<head>

<title>D3 Brush</title>

</head>

<body>

<style>

.selected {

fill: red;

stroke: brown;

}

</style>

// 2. 散布図の表示

var width = 800; // グラフの幅

var height = 600; // グラフの高さ

var margin = { "top": 30, "bottom": 30, "right": 30, "left": 30 };

var randomX = d3.randomUniform(0.5, 10);

var randomY = d3.randomNormal(0.5, 0.12);

var data = d3.range(500).map(function() { return [randomX(), randomY()]; });

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLinear()

.domain([0, 10])

.range([0, width - margin.right - margin.left]);

var yScale = d3.scaleLinear()

.domain([0, 1])

.range([height - margin.bottom - margin.top, 0]);

var dot = g.append("g")

.attr("fill-opacity", 0.2)

.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("cx", function(d) { return xScale(d[0]) })

.attr("cy", function(d) { return yScale(d[1]) })

.attr("r", 5);

svg.append("g")

.attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")

.call(d3.axisBottom(xScale));

svg.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

.call(d3.axisLeft(yScale));

// 3. brushの設定

var brush = d3.brush()

.extent([

[0, 0],

[width - margin.left - margin.right, height - margin.top - margin.bottom]

])

.on("start brush", brushed);

g.append("g")

.call(brush)

.call(brush.move, [

[xScale(2), yScale(0.8)],

[xScale(5), yScale(0.3)]

]);

function brushed() {

var x0 = xScale.invert(d3.event.selection[0][0]);

var y1 = yScale.invert(d3.event.selection[0][1]);

var x1 = xScale.invert(d3.event.selection[1][0]);

var y0 = yScale.invert(d3.event.selection[1][1]);

dot.classed("selected",

function(d) {

return(x0 <= d[0] && d[0] <= x1) && (y0 <= d[1] && d[1] <= y1);

}

);

}

</script>

</body>

解説

1. 選択時のスタイル設定

選択時にプロットに設定するスタイルを定義しておきます。

  <style>
  .selected {
    fill: red;
    stroke: brown;
  }
  </style>

<style>

.selected {

fill: red;

stroke: brown;

}

</style>

2. 散布図の表示

散布図の作り方の詳細は、こちらを参照ください。関連する部分を解説します。
散布図の元データを作成します。

  var randomX = d3.randomUniform(0.5, 10);
  var randomY = d3.randomNormal(0.5, 0.12);
  var data = d3.range(500).map(function() { return [randomX(), randomY()]; });

var randomX = d3.randomUniform(0.5, 10);

var randomY = d3.randomNormal(0.5, 0.12);

var data = d3.range(500).map(function() { return [randomX(), randomY()]; });

d3.randomUniformは引数に設定した範囲で乱数を発生させる関数を、d3.randomNormalは平均値と標準偏差を引数にしてガウス分布に従う乱数を発生させる関数を設定するものです。これらとd3.range(500).map()を使って、500点の二次元配列データを作成します。

  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

1 2	var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

body要素内にSVG要素を設定し、その中に"g"要素を設定します。プロットの表示と範囲選択用のbrush用を"g"要素内に設定します。

3. brushの設定

範囲選択用のbrushを設定するプロトタイプを設定し、callメソッドで呼び出すことでbrushを設定します。

  var brush = d3.brush()
    .extent([
      [0, 0],
      [width - margin.left - margin.right, height - margin.top - margin.bottom]
    ])
    .on("start brush", brushed);

  g.append("g")
    .call(brush)
    .call(brush.move, [
      [xScale(2), yScale(0.8)],
      [xScale(5), yScale(0.3)]
    ]);