1

我有一个允许平移和缩放行为的 d3 图表。它还具有 subGraph 功能，允许用户展开和折叠 subGraph。当用户单击图标打开和关闭 subGraph 时，此代码运行：

btn.on("click", function(d:any, i:any) {
        parentNode = nodeObject; // gives me he x and y coordinates of the parent node
        d3.event["stopPropagation"]();
        e["subGraph"].expand = !expand; // add or remove subGraph

        window.resetGraph = !window.resetGraph;
        console.log(window.resetGraph);
        if (window.resetGraph) {
                window.scale = window.zoom.scale();
                window.translate  = window.zoom.translate();
                window.zoom.scale(1).translate([0 , 0]);
        } else {    
                                     window.zoom.scale(window.scale).translate(window.translate);
         }

         console.log(window.zoom.scale());
         console.log(translate);    

        renderGraph();
});

我实质上是在单击图标时添加和删除节点的 subGraph 属性。然后完全重绘图形。

我可以获得父容器的 x 和 y 坐标，但是如果我要重新渲染图形，我该如何渲染图形，以便图形保持与单击时相同的比例和平移切换子图图标。我试图在与之前相同的位置重新绘制图表，只是子图展开或折叠。以下是图表呈现时似乎与我作斗争的代码：

   var scaleGraph = function() {
                var graphWidth = g.graph().width + 4;
                var graphHeight = g.graph().height + 4;
                var width = parseInt(svg.style("width").replace(/px/, ""), 10);
                var height = parseInt(svg.style("height").replace(/px/, ""), 10);
                var zoomScale = originalZoomScale;
                // Zoom and scale to fit        
                if (ctrl.autoResizeGraph === "original") {
                    zoomScale = initialZoomScale;
                }


                translate = [(width / 2) - ((graphWidth * zoomScale) / 2) + 2, 1];

                zoom.center([width / 2, height / 2]);
                zoom.size([width, height]);

                zoom.translate(translate);
                zoom.scale(zoomScale);

                zoom.event(svg);
            };

如果我检查是否已单击切换图标，是否可以使用与重绘前相同的比例和平移来重绘图形？

谢谢

4

2 回答 2

1

我只是通过跟踪当前的比例和平移值来解决它：

  zoom.on("zoom", function() {
        svgGroup.attr("transform", "translate(" + (<any>d3.event).translate + ")" + "scale(" + (<any>d3.event).scale + ")");  

      // keep track of the currentZoomScale and currentPosition at all times
        currentZoomScale = (<any>d3.event).scale;
        currentPosition = (<any>d3.event).translate;

  });

然后，当在上面的 scaleGraph 函数中重新渲染图形时，我只是检查了图形是否因为 subGraph 被切换而被重新渲染，如果有，那么我使用当前的比例和平移值：

  if (ctrl.autoResizeGraph !== "original" && togglingSubGraph) {
            zoomScale = currentZoomScale; // render the graph at its current scale
            translate = currentPosition; // render the graph at its current position

   }
于 2016-08-23T22:00:59.100 回答
0

我为你创造了一把小提琴。 小提琴

请检查功能 refreshGraph

  var refreshGraph =function(){
    window.resetGraph = !window.resetGraph;
  console.log(window.resetGraph);
  if(window.resetGraph){ 
    window.scale = window.zoom.scale();
    window.translate  = window.zoom.translate();

    window.zoom.scale(1).translate([0,0]);
  }else{
    window.zoom.scale(window.scale)
    .translate(window.translate);
  }
    console.log(window.zoom.scale());

  console.log(translate);

  draw();
}

我用过 window.zoom （用 window 让你知道这是共享的）

按钮重置将缩放级别切换为 0 比例，并在再次单击时切换回原来的位置。

希望能帮助到你。

于 2016-08-23T01:24:41.797 回答