d3绘制关系图的缩放功能实现

最新推荐文章于 2025-08-20 11:19:30 发布

原创

最新推荐文章于 2025-08-20 11:19:30 发布 · 923 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用D3.js库在关系图中实现缩放功能。通过在HTML文件中添加特定代码，并在浏览器中查看，可以观察到左上角的加减按钮用于控制关系图的缩放效果。

<!DOCTYPE html>
<meta charset="utf-8">

<style>.link {
   
     fill: none;  stroke: #666;  stroke-width: 1.5px;}#licensing {  fill: green;}.link.licensing {  stroke: green;}.link.resolved {  stroke-dasharray: 0,2 1;}circle {  fill: #ccc;  stroke: #333;  stroke-width: 1.5px;}text {  font: 12px Microsoft YaHei;  pointer-events: none;  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;}.linetext {    font-size: 12px Microsoft YaHei;}

.overlay {
   
   
  fill: none;
  pointer-events: all;
}
button {
   
   
  padding: 10px 20px;
}

</style>
<body>
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script   src="https://code.jquery.com/jquery-3.5.1.js"   integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="   crossorigin="anonymous"></script>
<script>

var links = 
[
{
   
   'source': '案例1', 'target': '故障方案'},
{
   
   'source': '案例1', 'target': '特征'},
{
   
   source: '特征', target: '1', 'rela': '特征1'},
{
   
   source: '特征', target: '2', 'rela': '特征2'},
{
   
   source: '特征', target: '3', 'rela': '特征3'},
{
   
   source: '特征', target: '4', 'rela': '特征4'},
{
   
   source: '特征', target: '5', 'rela': '特征5'},

];

var nodes = {
   
   };

links.forEach(function(link)
{
   
   
  link.source = nodes[link.source] || (nodes[link.source] = {
   
   name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {
   
   name: link.target});
});

var width = 1520, height = 1080;

var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(180)
    .charge(-1500)
    .on("tick", tick)
    .start();

var svg = d3.select(