d3.behavior.zoomは（）私はサンバーストにマウスホイールのズームを追加する代わりに、中央

Question

の隅にグラフを移動：
私は、私は、コードのこの部分を編集したもの：

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 10]) 
    .on("zoom", zoomed); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")") 
    .call(zoom); 

function zoomed() { 
    svg.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.scale + ')'); 
    //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

問題は、ページのロードのすべてがOKであると思われるときmouswheelをスクロールするために使用されている場合は、しかしサンバーストは、左上隅に終わるということです。

私はこのコードを変更することでこの問題を解決することができました：

function zoomed() { 
    svg.attr("transform", "translate(" + width/2 + "," + height * .52 + ")scale(" + d3.event.scale + ")"); 
} 

太陽の爆発は今のところ中にとどまりますが、これはカーソルの位置にズームされず、さらにズームアウトできなくなります。
サンバーストを左上隅に消さずに、カーソルの場所をズームする方法（最初のコード例のように）を教えてください。

JSfiddleを参照すると、ここでは機能しませんが、ローカルで実行すると機能します。

Answer 1

d3.event.translateは配列を返します。あなたはそれらの値（width/2とheight/2）を追加したい場合はこのように、あなたはそれらを個別に追加する必要があります。

function zoomed() { 
    svg.attr('transform', 'translate(' + (d3.event.translate[0] + width/2) + 
     ',' + (d3.event.translate[1] + height/2) + ') scale(' + d3.event.scale + ')'); 
} 

を別の方法として、あなたは、元のズーム機能を使用したい場合は...

function zoomed() { 
    svg.attr("transform", "translate(" + d3.event.translate + 
     ")scale(" + d3.event.scale + ")"); 
} 

私はZoとにおける標準d3.event.translateとd3.event.scaleを使用していた

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var foo = svg.append("g") 
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")") 
    .call(zoom); 

Answer 2

：...ちょうどグループの別の名前を割り当て、SVGの選択を破ります

最初にスクロールしたときに、全体のサンバーストが左上にジャンプした以外は、すべてうまくいきました。私はそれを真ん中に戻した後、それ自体を修正しましたが、それは迷惑でした。

私はこれと数時間苦労しました。しかし、さらにズームアウト、Basic Sunburst