d3 v7 中的简单平移和缩放答案

【问题标题】：Simple Pan and Zoom in d3 v7d3 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即可。

谁能帮忙？

【问题讨论】：

标签： javascript d3.js zooming panning

【解决方案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 width="300" height="200" />

【讨论】：