对 svg 内的元素进行缩放的问题

编程问答 2022-04-25

问题描述

我一直在对 svg 中生成的元素（有向图）应用缩放。原始代码使用d3js v3库，如下图所示：

<!DOCTYPE html>
<html>
<head>
  <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>[AF-PATTERN-EDITOR]</title>
  <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <Meta name="robots" content="noindex,nofollow">
  <Meta name="googlebot" content="noindex,nofollow">
  <Meta name="viewport" content="width=device-width,initial-scale=1">

<style  id="compiled-css" type="text/css">
.node,.link-label {
    fill:#ccc;
    stroke: #fff;
    stroke-width: 2px;
}
.node-active {
    stroke: #555;
    stroke-width: 1.5px;
}
.link-active {
    stroke: #555;
    stroke-opacity: 5;
}
line {
  stroke: rgb(212,212,212);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.overlay {
    fill: none;
    pointer-events: all;
}
.link{
    stroke: #ccc;
    stroke-width: 2px;
    }
svg {
  Box-sizing: border-Box;
  border: 1px solid rgb(212,212);
}
</style>

  <body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script  type="text/javascript">

var width = 960,height = 500,resolution = 150,r = 15;

/*var graph = {
    "nodes":  [
        {"task": "1","label": "1","social": "I","id": 1,"x": 150,"y": 450},{"task": "2","label": "2","social": "G","id": 2,"x": 300,"y": 150},{"task": "3","label": "3","social": "T","id": 3,"x": 450,"y": 300}
        ],"links": [
        {"source": "1","target": "2","type": "N:1"},{"source": "2","target": "3","type": "1:N"},{"source": "1","type": "1:1"}
        ]
}*/

var margin = {
    top: -5,right: -5,bottom: -5,left: -5
};

var colors = d3.scale.category20();

var svg = d3.select('body').append('svg')
    .attr('width',width)
    .attr('height',height)
    .append('g');

svg.call(d3.behavior.zoom().on("zoom",function () {
        svg.attr("transform","scale(" + d3.event.scale + ")")
      }));

var force = d3.layout.force()
    .charge(-200)
    .linkdistance(50)
    .size([width + margin.left + margin.right,height + margin.top + margin.bottom])

svg.selectAll('.vertical')
    .data(d3.range(1,width / resolution))
    .enter().append('line')
    .attr('class','vertical')
    .attr('x1',function(d) { return d * resolution; })
    .attr('y1',0)
    .attr('x2',function(d) { return d * resolution; })
    .attr('y2',height);

svg.selectAll('.horizontal')
    .data(d3.range(1,height / resolution))
    .enter().append('line')
    .attr('class','horizontal')
    .attr('x1',0)
    .attr('y1',function(d) { return d * resolution; })
    .attr('x2',width)
    .attr('y2',function(d) { return d * resolution; });

svg.append('defs').append('marker')
    .attr({'id':'arrowhead','viewBox':'-0 -5 10 10','refX':40,'refY':0,'orient':'auto','markerWidth':5,'markerHeight':5,'xoverflow':'visible'})
    .append('svg:path')
    .attr('d','M 0,-5 L 10,0 L 0,5')
    .attr('fill','#777')
    .style('stroke','none');

const graph = {nodes: [],links: []};

d3.json("graph.json",function (error,data) {
    if (error) throw error;
    //console.log(graph.nodes);
    //console.log(graph.links);
    graph.nodes = data.nodes;
    graph.links = data.links;
    update();    
})

const update = () => {

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on('drag',dragged);

var link = svg.selectAll("line.link")
    .data(graph.links)
    .enter().append("line")
    .attr("class","link")
    .attr('marker-end','url(#arrowhead)')

    .attr("data-source",function (d) {
          return d.source;
        })
    .attr("data-target",function (d) {
          return d.target;
        })
    .attr("x1",function (d) {
        for (let node of graph.nodes) {
            if (node.task === d.source)
                return node.x;
        }
    })
    .attr("x2",function (d) {
        for (let node of graph.nodes) {
            if (node.task === d.target)
                return node.x;
        }
    })
    .attr("y1",function (d) {
        for (let node of graph.nodes) {
            if (node.task === d.source)
                return node.y;
        }
    })
    .attr("y2",function (d) {
        for (let node of graph.nodes) {
            if (node.task === d.target)
                return node.y;
        }
    })
    .style("stroke-width",function(d) {
        return Math.sqrt(d.value);
        });   
    
    const links = graph.links.map(l => {
    const source = graph.nodes.find(n => n.task === l.source);
    const target = graph.nodes.find(n => n.task === l.target);
    return {...l,source,target};
    });
        
var linkLabel = svg.selectAll("g.link-label")
    .data(links)
    .enter()
    .append("g")
    .attr("class","link-label")
    .attr('transform',d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
    
linkLabel.append('circle')
    .attr('r',20)
    .style("fill",'#fff');
      
linkLabel.append('text')
    .text(d => d.type)
    .classed('label',true)
    .attr('text-anchor','middle')
    .attr('alignment-baseline','middle')
    .style('stroke','none')
    .style('fill','black')
      
//console.log('L: ',graph.links);   

var node = svg.selectAll("svg.node")
    .data(graph.nodes)
    .enter().append('g');

node.append("circle")
    .attr("class","node")
    .attr('node-id',d => d.social)
    .attr('cx',function(d) { return d.x; })
    .attr('cy',function(d) { return d.y; })
    .attr('r',r * 2)
    .call(drag);//
    
node.append("text")
    .attr("class","label")
    .attr('node-id',d => d.social)
    .attr('text-anchor','middle')
    .attr('dx',function(d) { return d.x; })
    .attr('dy',function(d) { return d.y; })
    .text(function(d) { return d.social; });

force.on("tick",function () {
    link.attr("x1",function (d) { return d.source.x; })
        .attr("y1",function (d) { return d.source.y; })
        .attr("x2",function (d) { return d.target.x; })
        .attr("y2",function (d) { return d.target.y; });
        
   linkLabel.attr('transform',${(d.source.y + d.target.y) / 2})`);

    node.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });

});

/*function zoomed() {
    container.attr("transform","translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}*/


function dragged(d) {
  var x = d3.event.x,y = d3.event.y,gridX = round(Math.max(r,Math.min(width - r,x)),resolution),gridY = round(Math.max(r,Math.min(height - r,y)),resolution);

      d3.select(this).attr('cx',d.x = gridX).attr('cy',d.y = gridY);
      d3.select(this).attr('dx',d.x = gridX).attr('dy',d.y = gridY);

      d3.selectAll(`[data-source='${d.task}']`).attr('x1',d.x).attr('y1',d.y);
      d3.selectAll(`[data-target='${d.task}']`).attr('x2',d.x).attr('y2',d.y);
      d3.select(`text[node-id='${d.social}']`).attr('dx',d.x).attr('dy',d.y)
      
      linkLabel.attr('transform',${(d.source.y + d.target.y) / 2})`);
}

function round(p,n) {
  return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
}
};

</script>
</body>
<html>

我尝试重用有关缩放功能的代码......但无济于事。当我应用它时，它通常会“冻结”网络并且我无法与网络交互（独立移动节点），即所有元素作为一个整体移动。如何在不影响生成图形特征的情况下应用缩放？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

d3-force-directedsvgsvgpanzoom