SVG要素の重なり順を動的に変える

SVG要素にz-indexが使えないことで一瞬戸惑ってしまいますが、要素の並び順＝重なり順であるので、要素を並び替えればいい。
ということでそれが実現できるSVG-Z-ORDERを利用します。

利用パッケージ

SVG-Z-ORDER
https://takamin.github.io/svg-z-order/
https://takamints.hatenablog.jp/entry/npm-svg-z-order-js

機能

• SVGZElement.toTop() - 指定した要素の並び順を一番先頭に持ってくる（一番手前に表示される）
• SVGZElement.toBottom() - 指定した要素の並び順を一番末尾へ変更する（一番後ろに表示される）
• SVGZElement.moveUp(element/n) - 指定されたターゲット要素の前またはn回、要素を手前へ移動する
• SVGZElement.moveDown(element/n) - 指定されたターゲット要素の後またはn回、要素を奥へ移動する
• SVGZElement.moveTo(element/index) - Moves the element to the specified position.ターゲット要素を指定された場所へ移動する

コード例

require使う場合

var svgz = require("svg-z-order");
var g = svg.getElementById("foo");
svgz.element(g).toTop();

require使えない／使わない場合

読み込みます。

<script type="text/javascript" src="svg-z-order.js"></script>

D3.jsとあわせて利用し、マウスオーバーした要素の重なり順を一番手前にするには、たとえばこんな感じで。

.on("mouseover", function() {
    var d3g = d3.select(this);
    svgz_element(d3g.node()).toTop();          
})