DOM中心点を含むd3パン/ズームがオフです

Question

d3を使用してズームとパンをしようとしています。

私はhereから例を取って、通常のdomのためにsvgを切り替えました。

コード：

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

<g>と<circle>の代わりに<div>と<p>を実際に必要とすると仮定します。

あなたの翻訳係数は少しオフです。

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); 
} 

にご

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); 
} 

を変更すると、私は考えるあなたの問題を "解決" します。

ここに更新コードがあります：http://codepen.io/anon/pen/bBoPVx