複雑なsvg構造を拡大する方法
スニペットにある複雑な形状のセットがあります。これらはReactでレンダリングされますが、これらの図形を拡大または縮小できるようにする方法について、いくつかのポインタを探しています。
私のグーグルは失敗していて、グラフの例しか本当に見つけることができません。
このように複雑な構造を拡大および縮小するにはどうすればよいですか？
<svg height="767" width="903">
<g class="vx-group vx-tree" transform="translate(20, 70)">
<g class="vx-group" transform="translate(0, 70)">
<g class="vx-group" transform="translate(0, 0)">
<path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5"
stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
</g>
<g class="vx-group" transform="translate(0, 0)">
<g class="vx-group" transform="translate(451.5, 0)" opacity="1">
<g class="vx-group node__container" transform="translate(0, 0)">
<svg class="" x="0" y="0" style="overflow: visible;">
<polygon
points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"
class="node__hexagon"></polygon>
</svg>
<g class="vx-group node__business-unit" transform="translate(0, 0)">
<use xlink:href="#icon-BusinessUnit"></use>
</g>
<g class="hierarchy-label__container" transform="translate(0, -40)">
<path class="" d="
M 0.0078125, 5.15625
L 34.64882865137755,25.156249999999996
M -0.9921875, 5.15625
L -34.63320365137754,25.156249999999996
H -65.8515625
a8,8 0 0 1 -8,-8
V -47.15625
a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8
L 73.8515625, 17.156249999999996
a8,8 0 0 1 -8,8
L 34.64882865137755, 25.156249999999996
Z
">
</path>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle"
style="pointer-events: none;">
<tspan x="0" dy="0em">Finance</tspan>
</text>
</svg>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle"
style="pointer-events: none;">
<tspan x="0" dy="0.71em">Business Unit</tspan>
</text>
</svg>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>Svgのスケーリングは、スケーリングとオフセットの両方を組み合わせた viewBox で行われます。素敵な記事 SVGのスケーリング方法 があります。以下から 記事 ：
ドキュメントをキャンバスと考える場合、ビューボックスはビューアに表示するキャンバスの一部です。
これは、カメラアプリの携帯電話の画面のようなもので、指定されたスケールとオフセットで観察されるシーンの一部を示します。
ViewBoxとは何かを示す素晴らしいサンプルが見つかります here 。
少し計算して、マウスホイールでズームイン/ズームアウトを実装しました。さらに、マウスムーブと表示スケール値によるパンニングを追加しました。 viewBoxの使用方法を示す例：
const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");
var viewBox = {x:0,y:0,w:svgImage.getAttribute("width"),h:svgImage.getAttribute("height")};
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
const svgSize = {w:svgImage.getAttribute("width"),h:svgImage.getAttribute("height")};
var isPanning = false;
var startPoint = {x:0,y:0};
var endPoint = {x:0,y:0};;
var scale = 1;
svgContainer.onmousewheel = function(e) {
e.preventDefault();
var w = viewBox.w;
var h = viewBox.h;
var mx = e.x;//mouse x
var my = e.y;
var dw = w*Math.sign(e.deltaY)*0.05;
var dh = h*Math.sign(e.deltaY)*0.05;
var dx = dw*mx/svgSize.w;
var dy = dh*my/svgSize.h;
viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w-dw,h:viewBox.h-dh};
scale = svgSize.w/viewBox.w;
zoomValue.innerText = `${Math.round(scale*100)/100}`;
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
}
svgContainer.onmousedown = function(e){
isPanning = true;
startPoint = {x:e.x,y:e.y};
}
svgContainer.onmousemove = function(e){
if (isPanning){
endPoint = {x:e.x,y:e.y};
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
var movedViewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
svgImage.setAttribute('viewBox', `${movedViewBox.x} ${movedViewBox.y} ${movedViewBox.w} ${movedViewBox.h}`);
}
}
svgContainer.onmouseup = function(e){
if (isPanning){
endPoint = {x:e.x,y:e.y};
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
isPanning = false;
}
}
svgContainer.onmouseleave = function(e){
isPanning = false;
}<span id="zoomValue">1</span>
<div id="svgContainer">
<svg id="svgImage" height="964" width="767">
<g class="vx-group vx-tree" transform="translate(20, 70)">
<g class="vx-group" transform="translate(0, 70)">
<g class="vx-group" transform="translate(0, 0)">
<path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5" stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
</g>
<g class="vx-group" transform="translate(0, 0)">
<g class="vx-group" transform="translate(451.5, 0)" opacity="1">
<g class="vx-group node__container" transform="translate(0, 0)">
<svg class="" x="0" y="0" style="overflow: visible;">
<polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon>
</svg>
<g class="vx-group node__business-unit" transform="translate(0, 0)">
<use xlink:href="#icon-BusinessUnit"></use>
</g>
<g class="hierarchy-label__container" transform="translate(0, -40)">
<path class="" d="
M 0.0078125, 5.15625
L 34.64882865137755,25.156249999999996
M -0.9921875, 5.15625
L -34.63320365137754,25.156249999999996
H -65.8515625
a8,8 0 0 1 -8,-8
V -47.15625
a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8
L 73.8515625, 17.156249999999996
a8,8 0 0 1 -8,8
L 34.64882865137755, 25.156249999999996
Z
"></path>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle" style="pointer-events: none;">
<tspan x="0" dy="0em">Finance</tspan>
</text>
</svg>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle" style="pointer-events: none;">
<tspan x="0" dy="0.71em">Business Unit</tspan>
</text>
</svg>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>数学：
csstransformを使用して svg をスケーリングできます。ズーム原点を「固定」する場所から css _transform-Origin_を設定し、transformでscale(x)を使用します。上の例のように、 _1_から_200_を呼び出すための最小値から_1%_まで、および最大値を_200%_までの入力要素の範囲：
_const slider = document.getElementById("zoomRange");
const zvgZoom = document.getElementById("svgZoom");
const zoomValue = document.getElementById("zoomValue");
slider.oninput = function() {
//console.log('zoom', this.value / 100);
zoomValue.innerText = `${this.value}%`;
zvgZoom.style.transform = `scale(${this.value / 100})`;
}__#svgContainer {
background-color: #dedede;
}
#svgZoom {
transform-Origin: 0% 0%;
}__<input type="range" min="1" max="200" value="100" class="slider" id="zoomRange">
<span id="zoomValue">100%</span>
<div id="svgContainer">
<svg id="svgZoom" height="767" width="903">
<g class="vx-group vx-tree" transform="translate(20, 70)">
<g class="vx-group" transform="translate(0, 70)">
<g class="vx-group" transform="translate(0, 0)">
<path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5" stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
</g>
<g class="vx-group" transform="translate(0, 0)">
<g class="vx-group" transform="translate(451.5, 0)" opacity="1">
<g class="vx-group node__container" transform="translate(0, 0)">
<svg class="" x="0" y="0" style="overflow: visible;">
<polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon>
</svg>
<g class="vx-group node__business-unit" transform="translate(0, 0)">
<use xlink:href="#icon-BusinessUnit"></use>
</g>
<g class="hierarchy-label__container" transform="translate(0, -40)">
<path class="" d="
M 0.0078125, 5.15625
L 34.64882865137755,25.156249999999996
M -0.9921875, 5.15625
L -34.63320365137754,25.156249999999996
H -65.8515625
a8,8 0 0 1 -8,-8
V -47.15625
a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8
L 73.8515625, 17.156249999999996
a8,8 0 0 1 -8,8
L 34.64882865137755, 25.156249999999996
Z
"></path>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle" style="pointer-events: none;">
<tspan x="0" dy="0em">Finance</tspan>
</text>
</svg>
<svg x="0" y="0" style="overflow: visible;">
<text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle" style="pointer-events: none;">
<tspan x="0" dy="0.71em">Business Unit</tspan>
</text>
</svg>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>_ズーム用の軽量スクリプトを見つけることができなかったとき（テストされたものはどれも、マウスカーソルを中心点として維持することができませんでした）、「少し」調査を行い、独自の解決策になりました。私はビューボックスを使用する最も簡単な方法を見つけました。
外部svgには、viewBoxを宣言する必要があります（または関数の最初に作成する必要があります）。
<svg id="svgImage" width="900" height="500" viewBox="0 0 900 500">
<style>text { fill: white; }</style>
<g id="par" class="vx-group vx-tree" transform="translate(20, 70)">
<g class="vx-group" transform="translate(0, 70)">
<g class="vx-group" transform="translate(0, 0)">
<path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5" stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
</g>
<g class="vx-group" transform="translate(0, 0)">
<g class="vx-group" transform="translate(451.5, 0)" opacity="1">
<g class="vx-group node__container" transform="translate(0, 0)">
<svg class="" x="0" y="0" style="overflow: visible;">
<polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon>
</svg>
<g class="vx-group node__business-unit" transform="translate(0, 0)">
<use xlink:href="#icon-BusinessUnit"></use>
</g>
<g class="hierarchy-label__container" transform="translate(0, -40)">
<path class="" d="
M 0.0078125, 5.15625
L 34.64882865137755,25.156249999999996
M -0.9921875, 5.15625
L -34.63320365137754,25.156249999999996
H -65.8515625
a8,8 0 0 1 -8,-8
V -47.15625
a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8
L 73.8515625, 17.156249999999996
a8,8 0 0 1 -8,8
L 34.64882865137755, 25.156249999999996
Z
"></path>
<svg x="0" y="0" style="overflow: visible;"><text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Business Unit</tspan></text></svg>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<script>
const svgImage = document.getElementById("svgImage");
const svgSize = {w:svgImage.clientWidth ,h:svgImage.clientHeight};
var oldScale = 1;
svgImage.onmousewheel = function(e) {
e.preventDefault();
var svgW = svgSize.w,
svgH = svgSize.h,
mX = e.offsetX,
mY = e.offsetY,
delta = (e.wheelDelta) ? -e.wheelDelta : e.detail,
newScale = oldScale + (oldScale*delta/1200); //1200: intensity
var vb = svgImage.getAttribute('viewBox').split(" ");
var newW = svgW * newScale,
newH = svgH * newScale,
newX = vb[0]*1 + (vb[2]*1 - newW) * (mX/svgW),
newY = vb[1]*1 + (vb[3]*1 - newH) * (mY/svgH);
viewBox = { x:Math.round(newX), y:Math.round(newY), w:newW, h:newH };
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
oldScale = newScale;
</script>
PS。 SVG座標系の操作に関する（そしてそれだけでなく）非常に優れた一連の記事は Sara Soueidan によって書かれています。周りを掘るのに良いブログ。
ズームとパンは、データ視覚化において一般的で有用な手法です。ベクターグラフィックは、ビットマップに対応するピクセル化の影響を受けないため、SVGベースの視覚化で特に効果的です。
Nick Qi Zhuの著書 Data Visualization with D3.js Cookbook（2013）により、この答えはズームとパンの両方に対するD3の組み込みサポートを探ります。
まず、Webブラウザーで次のファイルのローカルコピーを開きます。
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter10/zoom.html 。
このレシピでは、D3ズームサポートを使用して、幾何学的なズームとパンを実装します。これがコードでどのように行われるかを見てみましょう：
<script type="text/javascript">
var width = 960, height = 500, r = 50;
var data = [
[width / 2 - r, height / 2 - r],
[width / 2 - r, height / 2 + r],
[width / 2 + r, height / 2 - r],
[width / 2 + r, height / 2 + r]
];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(
d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoom)
)
.append("g");
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", r)
.attr("transform", function (d) {
return "translate(" + d + ")";
});
function zoom() {
svg.attr("transform", "translate("
+ d3.event.translate
+ ")scale(" + d3.event.scale + ")");
}
</script>
このレシピは、次のズームおよびパン効果を生成します。
元：
ズーム：
パン：
ズームとパンは、マウスホイールとマルチタッチジェスチャの両方に完全によく反応します（他の回答とは対照的です）。重労働のほとんどはD3ライブラリによって行われるため、コードはほとんど必要ありません。