D3.js 核心概念——交互（五）平移缩放之三

前端

2024-01-10 05:32:18

用 d3-zoom 为可视化作品添加平移和缩放交互

在数据可视化领域，交互性至关重要。它赋予用户探索数据、获得洞察并与之建立联系的能力。D3.js 的 d3-zoom 模块是一个强大的工具，它使开发人员能够轻松地向可视化作品添加平移和缩放交互。

什么是平移和缩放？

平移是指移动图形对象的位置，而缩放是指改变图形对象的大小。这两种交互方式使用户能够更仔细地查看数据、突出显示特定区域或放大以获得更广泛的视角。

D3-zoom

d3-zoom 函数通过添加平移和缩放事件侦听器来增强 SVG 元素。这些事件侦听器会在用户与 SVG 元素交互时触发，例如拖动或滚动。

在配置 d3-zoom 时，您可以设置以下属性：

scaleExtent： 限制缩放比例的范围。
translateExtent： 限制平移幅度的范围。
on： 指定用于处理平移和缩放事件的事件侦听器。

示例：缩放散点图

让我们使用 d3-zoom 为散点图添加平移和缩放交互。

// 创建 SVG 元素
var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建散点图
var scatterplot = svg.append("g")
  .attr("class", "scatterplot");

// 添加数据
d3.csv("data.csv", function(data) {
  scatterplot.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5);

  // 添加平移和缩放
  var zoom = d3.zoom()
    .scaleExtent([1, 10])
    .translateExtent([[-100, -100], [500, 500]])
    .on("zoom", function() {
      scatterplot.attr("transform", d3.event.transform);
    });

  svg.call(zoom);
});