d3用DOM中心點關閉的平移/縮放

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。

Issue： 請注意，平移效果很好，但縮放中心點關閉。它應該放大到鼠標所在的位置。

Answer 1

假設你真的需要一個<div> S和<p>！而非<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); 
} 

將 「解決」 您的問題，我認爲。

以下是更新的codepen：http://codepen.io/anon/pen/bBoPVx