Question

我有一个允许平移和缩放行为的d3图表。它还具有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坐标，但是如果我重新渲染图形，我该如何渲染图形以使图形保持与我时相同的比例和平移单击toggle subGraph图标。我试图重新绘制图形，只是在subGraph展开或折叠之前的位置。下面是图表呈现时似乎与我对抗的代码：

   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);
            };

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

由于

Answer 1

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

    C:\Program Files\MySQL\MySQL Server 5.7\bin>mysqlcheck -u root -p --auto-repair --check --all-databases
I got the following. how can I fix it?
enter code here

dbtorontotrader.amibrokerscans
Error    : Table 'dbtorontotrader.amibrokerscans' doesn't exist
status   : Operation failed
dbtorontotrader.backtest
Error    : Table 'dbtorontotrader.backtest' doesn't exist
status   : Operation failed
dbtorontotrader.customqueries
Error    : Table 'dbtorontotrader.customqueries' doesn't exist
status   : Operation failed
dbtorontotrader.davealerts
Error    : Table 'dbtorontotrader.davealerts' doesn't exist
status   : Operation failed
dbtorontotrader.davetrades
Error    : Table 'dbtorontotrader.davetrades' doesn't exist
status   : Operation failed
dbtorontotrader.executions
Error    : Table 'dbtorontotrader.executions' doesn't exist
status   : Operation failed
dbtorontotrader.ib
error    : Table upgrade required. Please do "REPAIR TABLE `ib`" or dump/reload to fix it!
dbtorontotrader.mb
error    : Table upgrade required. Please do "REPAIR TABLE `mb`" or dump/reload to fix it!
dbtorontotrader.mlsstats
Error    : Table 'dbtorontotrader.mlsstats' doesn't exist
status   : Operation failed

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

  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;

  });

Answer 2

我为你创造了一个小提琴。 fiddle

请检查函数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（用过的窗口让你知道这是共享的）

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

希望它有所帮助。

重新渲染图形时如何保持当前缩放比例和平移级别

2 个答案: