div3とd3ズームを持つd3力グラフ

Question

こんにちは、Stackoverflowcommunity！ 私はd3forceのグラフをd3forceで動かすことに問題があります。私はそれがズームとパンであることを達成することができましたが、そうすることでノードとリンクの間のアライメントが崩れ、どのように修正できるか分かりません....私は何を意味するのかを示すフィドルを作成しました。 https://jsfiddle.net/5jgrf5h8/5/

これは私がズームを行うコードです：

svg.call(d3.zoom() 
    //.scaleExtent([1/2, 4]) 
    .on("zoom", zoomed)) 
.on("dblclick.zoom", null); 
//.on("wheel.zoom", null); 

function zoomed() { 
    //link.attr("transform", d3.event.transform); 
    link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")"); 
    node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")"); 

    simulation.alphaTarget(0.001).restart(); 
    simulation.alphaTarget(0); 
} 

Answer 1

あなたdivノードでCSS scaleを適用すると、それは彼らが現在いる位置の原点と0,0ないの原点とです。

これを試してみてください：

function zoomed() { 

    // apply CSS scale with respect to current position 
    node.each(function(d){ 
    var self = d3.select(this), 
      x = self.style("left"), 
     y = self.style("top"); 
    self.style("transform-origin", "-" + x + " -" + y); 
    }) 

    link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")"); 
    node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")"); 

    simulation.alphaTarget(0.001).restart(); 
    simulation.alphaTarget(0); 
} 

---

fiddle here