Question

我使用D3.js创建了一个极坐标散点图（基于this post）。

我想添加缩放和平移功能。我已经看过矩形图的例子，但没有用于圆形图上的缩放/平移。

我只是一个使用D3的初学者，所以我有点失落。任何人都可以提供建议吗？

Answer 1

我不完全确定你的目标是什么，但我尝试了以下内容。

首先，您应该添加缩放行为。我在你的x和y方向都使用r比例，如：

var zoomBeh = d3.behavior.zoom()
    .x(r)
    .y(r)
    .on("zoom", zoom);

并将缩放行为调用到您的svg：

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height)
   .append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
   .call(zoomBeh);

最后你应该做一个缩放功能。

function zoom() {
  var t = svg.transition().duration(750);

  svg.selectAll(".point").transition(t)
  .attr("transform", function(d) {
        var coors = line([d]).slice(1).slice(0, -1);
        return "translate(" + coors + ")"
      })
}

这是更新的fiddle。这有点令人咋舌，我不知道为什么。

放大/平移D3.js Polar Scatter Plot

1 个答案: