d3图谱添加按钮缩放功能

D3.js是一个强大的JavaScript库，用于创建数据驱动的文档。要在D3图谱中添加按钮控制缩放功能，你可以按照以下步骤操作：

1. **引入D3库**：首先需要从cdnjs或其他CDN引入D3.js库。

<script src="https://d3js.org/d3.v6.min.js"></script>

2. **初始化SVG容器**：使用D3选择元素并创建SVG画布。

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

3. **添加缩放行为**：使用`d3.zoom()`函数创建一个缩放行为，并将其绑定到SVG上。

const zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

svg.call(zoom);

4. **创建缩放按钮**：使用HTML元素（如`<button>`）添加按钮，并为其设置事件监听器，比如`click`事件，触发缩放操作。

<button id="zoomIn">放大</button>
<button id="zoomOut">缩小</button>

<script>
document.getElementById('zoomIn').addEventListener('click', () => {
  svg.transition().scale(1.2).duration(500); // 放大
});

document.getElementById('zoomOut').addEventListener('click', () => {
  svg.transition().scale(.8).duration(500); // 缩小
});
</script>

5. **编写`zoomed`回调函数**：这个函数会在用户交互时更新视图并同步缩放比例。

function zoomed() {
  svg.selectAll('*').attr('transform', d3.event.transform);
}