[컴] d3, band-scale 에서 해당하는 x좌표의 data 를 가져오는 법

d3

band-scale 에서 해당하는 x좌표의 data 를 가져오는 법

간략하게 설명하면, 현재 x좌표를 band 크기로 나눠서 index 를 구하고, 그 index 로 해당 data 를 가져온다. 그래서 그 좌표를 가지고 focus 를 해당 위치에 보여지게 한다.(cx)

아래 코드에서는 x 좌표만 가지고 작업을 했다. 실제로는 y좌표 에 대한 처리도 필요하다. 자세한 코드는 ref. 2 를 참고하면 된다.

var width = 450;
var height = 450;
var data = [{date: '2020-10-10', value: 10}, {date: '2020-10-11', value: 12}];

var margin = {top: 10, right: 30, bottom: 30, left: 60}
var svg = d3.select("#my_chart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

const xScale = d3.scaleBand()
  .domain(data.map(d => d.date))
  .range([0, width])


var focus = svg
    .append('g')
    .append('circle')
      .style("fill", "none")
      .attr("stroke", "black")
      .attr('r', 8.5)
      .style("opacity", 0)

// Create a rect on top of the svg area: this rectangle recovers mouse position
  svg
    .append('rect')
    .style("fill", "none")
    .style("pointer-events", "all")
    .attr('width', width)
    .attr('height', height)
    .on('mousemove', () => {
      // get the index of Band-scale
      var eachBand = xScale.step();
      var index = Math.round((d3.mouse(this)[0] / eachBand));

      var selectedData = data[index];

      focus.transition()
          .duration('100')
          .attr("r", 7)
          .attr('cx', xScale(selectedData.date))
          .attr('display', null)
    })
    .on('mousemove', mousemove)
    .on('mouseout', mouseout);

See Also

1. 쿠...sal: [컴][자바스크립트] d3 cheat sheet

Reference

1. GitHub - d3/d3-scale: Encodings that map abstract data to visual representation.
2. Line chart with cursor for exact values