D3js d3.invert反轉Scale取值

用途

一開始我還不明白d3.invert實際用途，直到遇到最顯著的範例就是在與畫面互動時，可以準確知道圖上的某一點是某值。

d3.invert

const xScale = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

console.log(xScale.invert(0)); // 10
console.log(xScale.invert(960)) // 130

感覺非常像反向的scale，其實如果直接反向scale就是答案拉。

const xScale2 = d3.scaleLinear()
    .range([10, 130])
    .domain([0, 960]);

console.log(xScale2(0)); // 10
console.log(xScale2(960)) // 130

也是一樣的結果，只是把range, domain交換而已。

實際應用

目前我們有一個圖表，希望點擊畫面時，可以顯示目前點擊位置的值。

實踐過程

1. 點擊時，觸發svg點擊事件並得到x,y。
2. 透過x, y並使用d3.invert算出對應的值該為多少。
3. 在計算時要特別注意padding，以及svg實際大小。

點擊事件

 svg.on("click", function() {
   console.log(d3.pointer(event));
   // [149.01388549804688, 357.0138854980469]
  })

這是整張svg點擊事件，但因目前我們資料顯示都有透過transform進行位移，為了讓Axis不會被切到，所以我們要把得到的x, y減掉上方距離跟左側距離。

svg.on("click", function() {
   const x = d3.pointer(event)[0] - padding;
   const y = d3.pointer(event)[1] - padding;
   console.log(`${x}. ${y}`);
  })

好了！其實已經快結束了，接著就可以透過invert反轉出對應的位置了！

 svg.on("click", function(d, i, e) {
   const x = d3.pointer(event)[0] - padding;
   const y = d3.pointer(event)[1] - padding;
   console.log(`${x}. ${y}`);
   const clickX = xScale.invert(x);
   const clickY = yScale.invert(y);
   alert(`X: ${clickX}, Y: ${clickY}`)
  });

非常簡單，我們抓到我們點擊位置的資料了。

範例連結
Codepen

結論

這有甚麼好的用處呢？其實知道資料後，透過該資料可以推出最近位置的資料，就可以在該位置資料上顯示一些提示，可能像是當下的該筆資料的值等等。

參考

d3-scale