每次重绘后设置缩放比例

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