d3 v7 中的简单平移和缩放

Posted 2023-03-25

【中文标题】d3 v7 中的简单平移和缩放

【英文标题】：Simple Pan and Zoom in d3 v7

【发布时间】：2021-10-01 19:25:47

【问题描述】：

我需要使用 d3 版本 7 平移和放大一个简单的 d3 节点图。

const svg = d3.select("#network_graph")
                    .attr("viewBox", [0, 0, width, height]);

似乎没有任何关于如何在 v7 中使用 d3.zoom 的文档/教程，并且此功能在 v7 中发生了显着变化。我能找到的两个来源是指具体的地图效果图，我只需要用viewbox放大一个简单的div即可。

谁能帮忙？

【参考方案1】：

这是一个简单的 D3 V7 可缩放图形示例：

const data = 
  nodes: [
    id: 1, x: 100, y: 50,
    id: 2, x: 50, y: 100,
    id: 3, x: 150, y: 100,
  ],
  links: [
    source: 1, target: 2,
    source: 1, target: 3,
  ]
;

const svg = d3.select('svg');
const g = svg.append('g');

const handleZoom = (e) => g.attr('transform', e.transform);

const zoom = d3.zoom().on('zoom', handleZoom);

d3.select('svg').call(zoom);

const links = data.links.map(l => 
  const source = data.nodes.find(n => n.id === l.source);
  const target = data.nodes.find(n => n.id === l.target);
  return source, target;
);

console.log(links);

g.selectAll('line.link')
  .data(links, d => `$d.source.id-$d.target.id`)
  .enter()
  .append('line')
  .classed('link', true)
  .attr('x1', d => d.source.x)  
  .attr('x2', d => d.target.x)  
  .attr('y1', d => d.source.y)  
  .attr('y2', d => d.target.y)
  .style('stroke', 'black');
  
const nodes = g.selectAll('g.node')
  .data(data.nodes, d => d.id)
  .enter()
  .append('g')
  .classed('node', true)
  .attr('transform', d => `translate($d.x,$d.y)`);
  
nodes.append('circle')
  .attr('r', 10)
  .style('fill', 'blue');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

<svg   />