ズーム/パンD3.js極座標プロット

Question

D3.js（this postに基づく）を使用して極座標プロットを作成しました。

ズーム機能とパン機能を追加したいと思います。私は矩形プロットの例を見てきましたが、円形プロットのズーム/パンニングのためのものはありませんでした。

私はちょっと迷っているので、D3を使っているだけの初心者です。誰でも助けたり提案したりできますか？

Answer 1

私はあなたの目標が何であるか完全にはわかりませんが、私は以下のことを試しました。

まず、ズーム動作を追加する必要があります。

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

最後にあなたがズーム機能を確認する必要があり、私はあなたのx等のy方向の両方のためのRスケールを使用しました。

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が更新されています。それは少し驚異的ですが、なぜ私はまだよく分かりません。