Question

我使用D3.js创建了一个散点图，我想添加缩放和平移功能。我已经声明了散点图的缩放行为，请尝试在svg元素中使用它。但是会抛出错误，提示类型缩放行为的参数不能分配给类型选择的参数：selection SVGElement

我只是使用D3的初学者。有人可以提供帮助或建议吗？

var zoom = d3.zoom()
.scaleExtent([0.3, 2])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
});    
var svg = d3.select(component).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.call(zoom);

Answer 1

欢迎堆栈溢出。

您需要为onzoom处理程序提供功能

.on("zoom", function () {
  svg.attr("transform", d3.event.transform)
});

应该看起来像这样，在这里您要调用自己的函数，并将转换作为参数传递给它

  d3.select(context.canvas).call(d3.zoom()
      .scaleExtent([1, 8])
      .on("zoom", () => zoomed(d3.event.transform)));

zoomed函数可能是这样的：

  function zoomed(transform) {
    context.save();
    context.clearRect(0, 0, width, height);
    context.translate(transform.x, transform.y);
    context.scale(transform.k, transform.k);
    context.beginPath();
    for (const [x, y] of data) {
      context.moveTo(x + r, y);
      context.arc(x, y, r, 0, 2 * Math.PI);
    }
    context.fill();
    context.restore();
  }

这些摘录摘自以下示例：

https://observablehq.com/@d3/zoom-canvas

无法在散点图上添加缩放/平移

1 个答案: