缩放/平移 D3.js 极坐标散点图

【问题标题】：Zoom/Pan D3.js Polar Scatter Plot缩放/平移 D3.js 极坐标散点图
【发布时间】：2018-03-03 04:30:38
【问题描述】：

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

我想添加缩放和平移功能。我已经看到了矩形图的示例，但没有在圆形图上进行缩放/平移。

我只是使用 D3 的初学者，所以我有点迷茫。任何人都可以帮助/提供建议吗？

【问题讨论】：

你能告诉我们你到目前为止通过制作小提琴取得了什么成就吗？
当然：jsfiddle.net/8opgjz45/1
好的，我添加了一个答案，但我不完全确定你的目标是什么......
我的意思是：点在放大和缩小，但网格仍然是一样的。线条不应该改变，我不确定为什么圆圈应该改变。
我希望能够放大图形的特定点/区域，然后平移以找到特定的兴趣点。这是我正在尝试完成的功能示例，不幸的是不是极坐标散点图格式：bl.ocks.org/mbostock/b418a040bb28295e4a78581fe8e269d1您的帖子似乎是一个好的开始！谢谢！

标签： javascript d3.js plot zooming pan

【解决方案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。这有点令人震惊，我还不知道为什么。

【讨论】：