1

我正在使用“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);        
}

即使它将缩放级别设置为以前的值，我也无法在此之后进行缩放。任何建议都会很棒。

4

1 回答 1

0

尝试，

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 工作演示

于 2017-06-13T23:57:24.020 回答