Tooltipの位置をSVG要素の位置を元に決める #JavaScript

はじめに

SVG 図を描いたときにマウスオーバーでツールチップを表示して付加的な情報を出したい、というのはよくありますよね。ツールチップも、SVG 要素に title を設定する簡易的な方法からツールチップ用の div に対して visibility と position を設定する汎用的なものまであります。今回は後者の汎用的なものの話です。

D3.js で汎用的なツールチップを作る場合、ツールチップの位置を指定するのにマウスポインタの位置 (d3.event.page[XY]) を使う方法がよく紹介されています。たとえば Simple d3.js tooltips とか。でも、マウスポインタ位置でツールチップの位置を指定する方法だと、マウスオーバーするオブジェクトに対してツールチップの表示位置が都度変わってしまうんですよね。オブジェクトの右側にマウスを乗せれば右側に寄るし、左側にマウスを乗せれば左側による。マウスポインタ位置を使う以上どうしてもそうなる。

ここでは、マウスオーバーに対して、マウスポインタ位置に依存せずいつも決まった位置にツールチップを出したい = オブジェクトに対してツールチップ位置を固定する方法についてとりあげます。とはいってもこれもすでに整理してくれてる人がいるわけで、Positioning a Tooltip on an SVG がとても参考¹ になります。ツールチップ作るだけならここのコードを元に適当にコピペするだけでも動くのですが、その中身で何をやっているのかを見てみましょう。

実例

Gitリポジトリの情報可視化で実際に使っているので、これを元に話を進めます。こんな形で、rect の位置を元に、(マウスポインタ位置によらず) rect の真下にツールチップを出しています。

このツールチップをこの位置で出すためにどういう処理をしているのかを解説してみます。関係するコードを見てみましょう。

  _positionMatrixOfId(id) {
    const target = document.getElementById(id)
    // attribute .[xy] are only for rect and text.
    return target
      .getScreenCTM()
      .translate(+target.getAttribute('x'), +target.getAttribute('y'))
  }

  _enableTooltip(htmlStr, id) {
    const matrix = this._positionMatrixOfId(id)
    let yMargin = id.match(/commit.*label/) ? 1 : 2
    select('div#stat-tooltip')
      .style('visibility', 'visible')
      .style('left', `${window.pageXOffset + matrix.e - this.lc * 1.25}px`)
      .style('top', `${window.pageYOffset + matrix.f + this.lc * yMargin}px`)
      .html(htmlStr)
  }

_enableTooltip() はマウスオーバーで呼ばれる関数で、(1)ツールチップを visible にする (2)ツールチップの位置を設定する (3)ツールチップの中身(HTML)を設定する処理をしています。そして (2)位置設定では _positionMatrixOfId() が返す変換行列が使用されています。キモになるのはこの中にある getScreenCTM() ですね。

座標系の話

さて。getScreenCTM() の話をする前に、SVG 要素の位置情報を元にツールチップを出すために何をしなければいけないのかをおさらいしましょう。まずはマウスポインタ位置を使う方法について考えてみます。マウスポインタ位置を使う場合は具体的に「どこから見た」マウスポインタ位置をとっていたのか?

d3-selection/README.md at v1.4.1 · d3/d3-selection · GitHub
- UIEvent.pageX - Web APIs | MDN
- UIEvent.pageY - Web APIs | MDN

pageY についてみると

integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document

とあります。"ドキュメント全体" に対するマウスポインタの位置。つまり「ドキュメント全体の座標系で見て」どの位置にツールチップを出すべきかを決める必要がある。まあ図を見た方が早いので見てしまいましょう。上のコードではこういう座標変換をやっています。

具体的にやってみた方がわかりやすいので、Gitリポジトリの情報可視化の実例をもとに座標値をとって上の図に入れています。順に見てみましょう。まず、ツールチップを表示させたい SVG 要素 (rect#stat190) は (32,16) の位置にあります。

このオブジェクトは SVG 左上を原点とする座標系から見て (259, 120) の位置に平行移動された座標系 (g#stat-group) の中にあります。

SVG 要素からわかるのはここまで。マウスオーバーが発生するのは rect ですが、オブジェクトにあるのは直近の座標系 (g#stats-group) から見たときの位置だけなので、どうにかしてこれを「ドキュメント全体の座標系」に変換してやらないといけないわけですね。

Screen Current Transformation Matrix (Screen CTM)

もう上の図でバラしてしまっていますが、getScreenCTM() はスクリーン (ディスプレイ上に見えている範囲) の原点を基準にして、指定した要素の属する座標系までの変換行列を出してくれます。

参照:

Coordinate Systems, Transformations and Units – SVG 1.1 (Second Edition)
- CTMに関する説明はここ
- 座標系, 変換, 単位 – SVG 1.1 （第２版）
Basic Data Types and Interfaces – SVG 1.1 (Second Edition)
- getScreenCTM() についての説明はここ
- 基本データ型と基本インタフェース – SVG 1.1 （第２版）
SVGGraphicsElement - Web APIs | MDN
svg要素の基本的な使い方まとめ

上の例で実際に計算してみましょう。

\begin{bmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x \\
y \\
1
\end{bmatrix}
=
\begin{bmatrix}
1 & 0 & 267 \\
0 & 1 & 128 \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x \\
y \\
1
\end{bmatrix}
=
\begin{bmatrix}
x + 267 \\
y + 128 \\
1
\end{bmatrix}

getScreenCTM() は上で書いたような座標変換計算のための変換行列を出しています。平行移動しかないので x/y にかかる係数 $a, b, c, d$ は使われておらず、使うのはオフセット部分 $e, f$ だけですね。さて。あとは svg の位置がどこになるかですが、

スクロールしていないのでドキュメント座標系とスクリーン座標系は一致 (window.page[XY]Offset = 0)
ドキュメント内の余白 (margin/padding) は body で margin: 8px が設定されているだけ

という状態。後は足し算をしてやればよい。

pageXOffset + margin-left (body) + stats.transform.x = 0 + 8 + 259 = 267 = ScreenCTM.e
pageYOffset + margin-top (body) + stats.transform.y = 0 + 8 + 120 = 128 = ScreenCTM.f

rect の所属する座標系の原点までの変換行列 (平行移動なので x/y の移動量) が求められていることがわかります。実装上は

    return target
      .getScreenCTM() // screen 座養鶏で見た target (SVG要素) のある座標系の位置
      .translate(+target.getAttribute('x'), +target.getAttribute('y')) // target 位置まで平行移動

と、getScreenCTM のあとで translate して rect の位置を足し込んでいます。ここで返している変換行列はスクリーン座標系での rect の位置になるわけです。(それを下のコードでは matrix として受けている。)

    select('div#stat-tooltip')
      .style('visibility', 'visible')
      .style('left', `${window.pageXOffset + matrix.e - this.lc * 1.25}px`)
      .style('top', `${window.pageYOffset + matrix.f + this.lc * yMargin}px`)
    //               ^^^^^^^^^^^^^^^^^^^^ 
    //               ドキュメント座標系で見た スクリーン座標系の原点
    //               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //               ドキュメント座標系で見た 対象 SVG 要素 (rect) の位置

ドキュメント原点 → スクリーン原点 (page[XY]Offset) → 対象オブジェクト位置 ( matrix.[ef]) が求められています。それを起点にしているので、 ドキュメント全体の座標系で見たときの SVG 要素 (rect) 位置に対して どこにツールチップを表示するかを計算している……ということです。

おわりに

ツールチップの話でした。これも、どこから見た何の位置を求めるべきなのか、というのがちょっとわかりにくいですよね。まあグラフィクス関連は座標系の話からは逃れられないですが……。CTM についての説明はすごく単純な状況の計算だけ取り上げているので厳密にはちょっと違うとか説明が足りないとかはあるかも。変なところがあったら教えてください。

この CodePen のデモは javascript - D3.js: Position tooltips using element position, not mouse position? - Stack Overflow で紹介されていたものです。 ↩