d3 v7 中的简单平移和缩放

问题描述

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

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

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

有人可以帮忙吗？

解决方法

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

const data = {
  nodes: [
    {id: 1,x: 100,y: 50},{id: 2,x: 50,y: 100},{id: 3,x: 150,],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" />

javascript panning zooming