每次重繪後設置縮放比例

Question

我使用'dagre d3'來顯示依賴圖。我還使用滑塊（當用戶滑動滑塊時，我用它來逐步顯示圖形的演變），因此每次移動滑塊時，圖形都會重繪。這是第一次，「縮放」功能將被設置如下圖所示：

var zoom = d3.behavior.zoom().on("zoom", function() { 
inner.attr("transform", "translate(" + d3.event.translate + ")" + 
    "scale(" + d3.event.scale + ")"); 
}); 
svg.call(zoom); 

我想保留縮放級別，如果用戶在已經放大或縮小圖形，然後移動滑塊。所以讓它工作，我做了以下。當用戶滑動滑塊時，將調用此方法。

function redrawGraphToStage(stageToRedraw) { 
    // Not sure how to get previous values. below one works but feel its bit hacky. 
    if(inner[0][0].transform.animVal.length){ 
     tempInnerTranslate = [inner[0][0].transform.animVal[0].matrix.e, inner[0][0].transform.animVal[0].matrix.f]; 
     tempInnerScale = inner[0][0].transform.animVal[1].matrix.a; 
} 
// do modifications to graph. and re-render. 
if(tempInnerScale || tempInnerTranslate){ 
    // this will set up the zoom level to before. 
    zoom.translate(tempInnerTranslate).scaleExtent(tempInnerScale, tempInnerScale).event(svg);   
} 

儘管它將縮放級別設置爲之前的值，但我無法在此之後進行縮放。任何建議都會很棒。

Answer 1

嘗試，

var zoom = d3.behavior.zoom().on("zoom", zoomed); 
svg.call(zoom); 

function zoomed() { 
    inner.attr("transform", 
     "translate(" + zoom.translate() + ")" + 
     "scale(" + zoom.scale() + ")" 
    ); 
} 

function redrawGraphToStage(stageToRedraw) { 
    // Not sure how to get previous values. below one works but feel its bit hacky. 
    if(inner[0][0].transform.animVal.length){ 
     tempInnerTranslate = [inner[0][0].transform.animVal[0].matrix.e, inner[0][0].transform.animVal[0].matrix.f]; 
     tempInnerScale = inner[0][0].transform.animVal[1].matrix.a; 
} 
// do modifications to graph. and re-render. 
if(tempInnerScale || tempInnerTranslate){ 
    // this will set up the zoom level to before. 
    zoom.translate(tempInnerTranslate).scale(tempInnerScale, tempInnerScale); 
    zoomed();   
} 

我不知道你正在使用的滑塊，但我給你做一個演示，您可以用滑塊控制的縮放比例。 重要變化：scaleIntent替換爲scale。

JSFiddle working demo