带有 DOM 中心点的 d3 平移/缩放已关闭

Question

我正在尝试使用 d3 进行缩放和平移。

我从here 中举了一个例子，并把 svg 换成了普通的 dom。

代码：

var section = d3.select("section"),
    width = +section.attr("width"),
    height = +section.attr("height");

var points = d3.range(2000).map(phyllotaxis(10));

var div = section.append("div");

div.selectAll("p")
    .data(points)
  .enter().append("p")
    .attr("style", function(d) { return 'left: '+d[0]+'px; top: '+d[1]+'px;' })
    .text('hi');

section.call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

function zoomed() {
  div.attr("style", `transform: translate(${d3.event.transform.x}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
  div.attr("transform", d3.event.transform);
}

function phyllotaxis(radius) {
  var theta = Math.PI * (3 - Math.sqrt(5));
  return function(i) {
    var r = radius * Math.sqrt(i), a = theta * i;
    return [
      960 / 2 + r * Math.cos(a),
      500 / 2 + r * Math.sin(a)
    ];
  };
}

这是一个 codepen 显示问题。

问题： 请注意，平移效果很好，但缩放中心点已关闭。它应该以鼠标所在的位置为中心放大。

Answer 1

假设您确实需要 <div>s 和 <p>s 而不是 <g>s 和 <circle>s；

你的翻译系数有点偏。

改变你的

function zoomed() {
  g.attr("style", `transform: translate(${d3.event.transform.x}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
  g.attr("transform", d3.event.transform);
}

到

function zoomed() {
  g.attr("style", `transform: translate(${d3.event.transform.x-480}px, ${d3.event.transform.y}px) scale(${d3.event.transform.k})`);
  g.attr("transform", d3.event.transform);
}

我认为会“解决”你的问题。

这是更新后的代码笔：http://codepen.io/anon/pen/bBoPVx