d3 如何动态改变比例尺实现缩放功能

当涉及到可视化工具时，缩放是一个非常有用的功能。通过缩放，用户可以放大或缩小可视化效果，以便更好地查看和理解数据。在本教程中，我们将使用d3动态改变比例尺来实现缩放功能。

步骤1：初始化

首先，我们需要初始化一个图表对象，并且使用一个线性比例尺为x轴和y轴设置初始范围。请注意，我们以像素为单位定义了图表的大小。

let chart = {
	range: {
		x: [0, 100],
		y: [0, 100]
   },
   margin: {
		left: 50,
		right: 50,
		top: 50,
		bottom: 50
   },
   client: {
		width: 600,
		height: 400
   },
   xScale: d3.scaleLinear() , 
   yScale: d3.scaleLinear(), 
   xOriginScale: d3.scaleLinear() , 
   yOriginScale: d3.scaleLinear(), 
};

// 设置x和y轴比例尺
chart.xScale = d3.scaleLinear().domain(chart.range.x).range([chart.margin.left, chart.client.width - chart.margin.left - chart.margin.right]);
chart.yScale = d3.scaleLinear().domain(chart.range.y).range([chart.client.height - chart.margin.bottom - chart.margin.top - 10, chart.margin.bottom]);

// 设置原始比例尺为x和y轴比例尺
chart.xOriginScale = chart.xScale;
chart.yOriginScale = chart.yScale;

// 移除原始svg元素并在".chart"元素中添加一个svg元素
d3.selectAll("svg").remove();
chart.svg = d3.select(".chart").append("svg")
	.attr("width", chart.client.width).attr("height", chart.client.height);

步骤2：创建图表

接下来，我们需要通过添加一些图形元素来创建图表，这里可以自己发挥创意。在这个例子中，我们只是添加了两个矩形和一个圆形。

chart.svg.selectAll(".rectangle1").data([0]).enter().append("rect")
	.attr("x", 10)
	.attr("y", 10)
	.attr("width", 20)
	.attr("height", 20)
	.attr("fill", "red");

chart.svg.selectAll(".rectangle2").data([0]).enter().append("rect")
	.attr("x", 70)
	.attr("y", 70)
	.attr("width", 20)
	.attr("height", 20)
	.attr("fill", "green");

chart.svg.selectAll(".circle").data([0]).enter().append("circle")
	.attr("cx", 50)
	.attr("cy", 50)
	.attr("r", 20)
	.attr("fill", "orange");

步骤3：添加缩放功能

现在，我们可以添加缩放功能了。我们使用d3.zoom对象创建一个缩放行为，并指定可以缩放的范围。接着，我们将缩放行为应用于svg元素。每当缩放事件发生时，我们将更新x和y轴比例尺，然后重新绘制图表。

// 缩放
let zoom = d3.zoom()
	// 设置缩放范围
	.scaleExtent([1, 100])
	// 缩放事件回调函数，用于更新x和y轴比例尺并重新绘制图表
	.on("zoom", function(event: d3.ZoomEvent) {
		let newXScale = event.transform.rescaleX(chart.xOriginScale);
		let newYScale = event.transform.rescaleY(chart.yOriginScale);
		chart.xScale = newXScale;
		chart.yScale = newYScale;
		chart.key = Number(!chart.key); // 标记需要更新图表，这里我们假设key只有两个值0和1
	});
    
// 将zoom应用到svg元素
chart.svg.call(zoom as any);

步骤4：重新绘制图表

最后，我们需要重新绘制图表，以便能够看到缩放效果。在本例中，我们只是用一个简单的标记变量（chart.key），来指示缩放事件发生时需要重新绘制图表。

// 监听缩放事件并重新绘制图表
setInterval(() => {
  if (chart.key) {
    chart.svg.selectAll(".rectangle1")
	    .attr("x", (d: any, i: number) => chart.xScale(10))
	    .attr("y", (d: any, i: number) => chart.yScale(10))
	
    chart.svg.selectAll(".rectangle2")
	    .attr("x", (d: any, i: number) => chart.xScale(70))
	    .attr("y", (d: any, i: number) => chart.yScale(70))
	
    chart.svg.selectAll(".circle")
	    .attr("cx",(d: any, i: number) => chart.xScale(50))
	    .attr("cy",(d: any, i: number) => chart.yScale(50));
    }
}, 10);