小框显示我们在强制布局中悬停的位置（D3.js）答案

【问题标题】：Small Box to display where we are hovering in force layout (D3.js)小框显示我们在强制布局中悬停的位置（D3.js）
【发布时间】：2018-08-07 23:51:20
【问题描述】：

我想查看我放大了力布局图的部分

简而言之。我想在小框中查看整个图表的小图片，它将显示我使用 D3.js 悬停在图表上的位置

请参考这张地图图片，我想要同样的力量布局。

【问题讨论】：

向我们展示你到目前为止所做的尝试
请查看以下链接jsfiddle.net/dipparmar/466nrbv0/4
@DipParmar 您还需要显示圆圈吗？还是具有相对位置的简单矩形就足够了？
是的，我需要将所有内容都显示在那个小区域@bumbeishvili

标签： javascript jquery d3.js

【解决方案1】：

我分三步完成：

1)为 SVG 的鼠标悬停事件附加一个监听器

   var newTx, newTy = 0;
   svg.on("mouseover", function(){
       var coordinates = [0, 0];
       coordinates = d3.mouse(this);
       newTx = (100 - coordinates[0]) ;
       newTy = (100 - coordinates[1]) ;
   });

2) 使用 JS cloneNode() 函数以一定间隔复制 SVG 元素。使用之前获得的翻译来更新 SVG 的新副本：

   setInterval(function(){
       d3.selectAll("#zoomed-map").select("*").remove();
       var content = document.getElementById("map").cloneNode(true);
       document.getElementById('zoomed-map').appendChild(content);
       if(newTx && newTy ){
                      d3.select("#zoomedmap").select("svg")
                        .attr('transform', 'translate(' + newTx + ',' +  newTy +')');
                }
   },50);

3) 更新 .zoomed-part / #zoomed-map div 的 CSS：

#zoomed-map         {
    zoom:120%;
    overflow:hidden;}

#zoomed-map #map   {
     border:none;  }

Here's the JSFiddle

【讨论】：

谢谢 :) 这正是我所需要的