D3.js 범위 선택(d3.brush) 터치 패널 사용법

D3의 범위 선택의 터치 패널 사용법을 소개한다.

범위 선택의 기본적인 사용법은 여기에서 소개했는데, 터치 패널에 대응하는 경우는 이 샘플과 같이 변경하면 사용하기 쉬워진다.

예제 프로그램

그래프를 터치한다. 여기 예제과 달리 터치한 곳으로 범위 선택이 이동한다.

코드 확인

예제 코드

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Brush Touch</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)

    var g2 = g.append("g")
      .call(brush)
      .call(brush.move, [
        [xScale(2), yScale(0.8)],
        [xScale(5), yScale(0.3)]
      ])
      // 여기부터 중요 -----------------------------
      .selectAll(".overlay")
      .each(function (d) { d.type = "selection"; })
      .on("mousedown touchstart", brushcentered);
    // 여기까지 중요 -----------------------------

    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);
        }
      );
    }

    // 여기부터 중요 -----------------------------
    function brushcentered() {
      var mouse = d3.mouse(this);

      var dx = xScale(2) - xScale(0);
      var dy = yScale(0.2) - yScale(0);

      var x0 = mouse[0] - dx / 2;
      var x1 = mouse[0] + dx / 2;
      var y0 = mouse[1] - dy / 2;
      var y1 = mouse[1] + dy / 2; //

      var xMax = xScale.range()[1];
      var yMax = yScale.range()[0];
      var x = x1 > xMax ? [xMax - dx, xMax] : x0 < 0 ? [0, dx] : [x0, x1];
      var y = y1 > yMax ? [yMax - dy, yMax] : y0 < 0 ? [0, dy] : [y0, y1];
      d3.select(this.parentNode).call(brush.move, [
        [x[0], y[1]],
        [x[1], y[0]]
      ]);
    }
    // 여기까지 중요 -----------------------------
  </script>
</body>

<html>

코드 설명

기본 프로그램은 이 범위 선택과 동일하다다. 중요하다고 표시한 부분을 설명한다.

클릭, 터치 시 이벤트 설정

var g2 = g.append("g")
  .call(brush)
  .call(brush.move, [
    [xScale(2), yScale(0.8)],
    [xScale(5), yScale(0.3)]
  ])
  .selectAll(".overlay")
  .each(function(d) { d.type = "selection"; })
  .on("mousedown touchstart", brushcentered);

call 메소드에서 brush를 설정하면 다음 SVG 요소가 설정된다.

<g class="brush" fill="none" pointer-events="all" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
  <rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="960" height="500"></rect>
  <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" x="112" y="194" width="182" height="83"></rect>
  <rect class="handle handle--n" cursor="ns-resize" x="107" y="189" width="192" height="10"></rect>
  <rect class="handle handle--e" cursor="ew-resize" x="289" y="189" width="10" height="93"></rect>
  <rect class="handle handle--s" cursor="ns-resize" x="107" y="272" width="192" height="10"></rect>
  <rect class="handle handle--w" cursor="ew-resize" x="107" y="189" width="10" height="93"></rect>
  <rect class="handle handle--nw" cursor="nwse-resize" x="107" y="189" width="10" height="10"></rect>
  <rect class="handle handle--ne" cursor="nesw-resize" x="289" y="189" width="10" height="10"></rect>
  <rect class="handle handle--se" cursor="nwse-resize" x="289" y="272" width="10" height="10"></rect>
  <rect class="handle handle--sw" cursor="nesw-resize" x="107" y="272" width="10" height="10"></rect>
</g>

선택 가능 범위를 나타내는 "overlay"class 속성을 가지는 rect 요소에 이벤트 핸들러(brushcenterd)를 설정한다. 그 때, "overlay"의 type을 selection으로 변경해 두면, move 메소드로 선택 범위를 이동시킬 수 있게 된다.

클릭, 터치시 이벤트 핸들러

이벤트 핸들러 (이벤트 발생시 호출되는 함수)를 설정한다.

  function brushcentered() {
    var mouse = d3.mouse(this);

    var dx = xScale(2) - xScale(0);
    var dy = yScale(0.2) - yScale(0);

    var x0 = mouse[0] - dx / 2;
    var x1 = mouse[0] + dx / 2;
    var y0 = mouse[1] - dy / 2;
    var y1 = mouse[1] + dy / 2; //

    var xMax = xScale.range()[1];
    var yMax = yScale.range()[0];
    var x = x1 > xMax ? [xMax - dx, xMax] : x0 < 0 ? [0, dx] : [x0, x1];
    var y = y1 > yMax ? [yMax - dy, yMax] : y0 < 0 ? [0, dy] : [y0, y1];
    d3.select(this.parentNode).call(brush.move, [
      [x[0], y[1]],
      [x[1], y[0]]
    ]);

  }

d3.mouse()는 마우스의 위치를 받아오는 메소드로 인수내의 요소에 대한 마우스 좌표를 [x, y]의 형태로 가져온다. dx, dy는 터치시 선택 범위의 크기이다. this.parentNode를 선택하고 brush를 설정한 "overlay"의 부모 요소를 참조한다.

마무리

터치로 이동한 선택 영역은 네 모퉁이를 드래그하여 선택 범위를 변경할 수 있다.

터치 조작에서는 드래그 조작과 같이 범위 선택하기 어려워, 이 페이지에서 소개한 방법으로 가능하고, 화면이 스크롤 하지 않는 경우 등은 D3.js 범위 선택(d3.brush) 사용법의 방법으로 가능하다.




최종 수정 : 2024-01-18