百分比进行缩放"/>
AntV G6按照图形大小百分比进行缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图形大小百分比缩放</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src=".0.0/g6.js"></script>
<script src=".0.0/g6.js"></script>
<script src=".2.1.min.js"></script>
<script>
$('body').html('<button class="zoom" data-ratio="0.2">20%</button><button class="zoom" data-ratio="0.5">50%</button><button class="zoom" data-ratio="1">100%</button><button class="zoom" data-ratio="1.5">150%</button><button class="zoom" data-ratio="2">200%</button><div id="mountNode"></div>');
var data = {nodes: [{id: 'node1',x: 100,y: 200}, {id: 'node2',x: 300,y: 200}],edges: [{id: 'edge1',target: 'node2',source: 'node1'}]
};
var graph = new G6.Graph({container: 'mountNode',fitView: 'cc',height: window.innerHeight
});
graph.read(data);var buttons = document.getElementsByClassName('zoom');var _loop = function _loop(index) {var button = buttons[index];button.onclick = function() {graph.zoom(Number(button.dataset.ratio));};
};for (var index = 0; index < buttons.length; index++) {_loop(index);
}
</script></body>
</html>
图形结果展示
初始大小
20%大小
50%大小
100%大小
150%大小
200%大小
更多推荐
AntV G6按照图形大小百分比进行缩放
发布评论