如何解決我的羣集捆綁圖中的縮放和平移問題？

Question

我已經用一些數據創建了一個分層邊緣綁定圖，並嘗試在我遇到的一些問題的圖上實現縮放和拖動。

這裏是我到目前爲止類似工作的jsfiddle：拖動和縮放只發生

1）：https://jsfiddle.net/hnjvxd48/1/

和相關代碼：

var zoom = d3.behavior.zoom() 
    .scaleExtent([0,8]) 
    .on("zoom", zoomhandler); 

var drag = d3.behavior.drag() 
    .origin(function(d) { return d; }) 
    .on("dragstart", dragstarted) 
    .on("drag", dragged) 
    .on("dragend", dragended); 

var svg = d3.select(".container").append("svg") 
.attr("width", diameter) 
.attr("height", diameter) 
.append("g") 
.attr("transform", "translate(" + radius + "," + radius + ")") 
.call(zoom) 
.call(drag); 

function zoomhandler(){ 
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 
function dragstarted(d) { 
    d3.event.sourceEvent.stopPropagation(); 
    d3.select(this).classed("dragging", true); 
} 

function dragged(d) { 
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 
} 

function dragended(d) { 
    d3.select(this).classed("dragging", false); 
} 

你會發現在外部邊緣而不是圖形的內部部分。

2）拖動圖形會導致圖形閃爍和居中以更改並切斷。

3）縮放（通過鼠標滾輪完成）也會使圖形不正確，並將其置於不可預知的位置，部分位於視口外。

4）嘗試在縮小圖形後拖動圖形使其閃爍並消失。

什麼原因導致這些問題，我該如何解決它們？我怎麼能給我的圖形（這比我提供的示例大得多）最初「縮小」狀態，並且可能使用按鈕單擊事件而不是本地滾輪實現來觸發縮放功能？

Answer 1

這裏需要注意的是，拖拽功能實際上是多餘的。在這個（http://bl.ocks.org/mbostock/6123708）d3拖動+放大示例中，它們被用於移動各個「點」。你想要一次移動整個圖形，這是由你所包含的'zoomhandler'功能的'translate'部分處理的。

這裏的工作小提琴：https://jsfiddle.net/14f9f4k3/1/

，關鍵代碼與變化的意見指出：

var zoom = d3.behavior.zoom() 
    .scaleExtent([0,8]) 
    .on("zoom", zoomhandler); 

//added another group as a child of the group having zoom called on it w/ id 'draggroup' to append nodes and links to 
var svg = d3.select(".container").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")") 
    .call(zoom) 
    .append('g') 
    .attr('id','draggroup'); 

//added a rect behind the other elements to make an easy target for the pointer 
d3.select('#draggroup') 
    .append('rect') 
    .attr("transform", "translate(" + -radius + "," + -radius + ")") 
    .attr('width',diameter) 
    .attr('height',diameter) 
    .attr('fill','#fff'); 

//no need for separate drag functions, translate and scale here do what you want 
function zoomhandler(){ 
    svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")"); 
    } 

//append the links and nodes to the group we created above instead of the base svg 
var link = d3.select('#draggroup').append("g").selectAll(".link"), 
    node = d3.select('#draggroup').append("g").selectAll(".node");