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

私はあなたのために 1 つのフィドルを作成しました。 フィドル

関数 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 に答える