如何以点为中心的特定集合的布局居中

Question

我有一个图表，具有简洁的布局。我试图让用户搜索特定的节点集合，然后让程序仅对集合中的那些节点运行同心布局，以便缩放/集中关注目标集合。一切正常，除了在使这些节点同心的过程中，它们都移动到屏幕的右下角（至少相对于图中的其他节点而言）。

是否有任何内置布局选项可将要“布局”的节点围绕视口中的特定位置居中？

Answer 1

通过使用boundingBox布局选项“固定”布局的选项。大多数（或所有）布局均具有此选项。

您可以尝试以下方法：

let p = node.data(/* Your node position field */);

let l = nodes.layout({
    name: 'concentric',
    fit: false,
    //your animation and padding options
    boundingBox: {
      x1: p.x - 1,
      x2: p.x + 1,
      y1: p.y - 1,
      y2: p.y + 1
    },
    avoidOverlap: true,
    concentric: function( ele ){
      if( ele.same( node ) ){
        return 2;
      } else {
        return 1;
      }
    },
    levelWidth: function(){ return 1; },
});

l.run();

根据example改编而成，与您的问题有一些相似之处。它会将您选择的节点附近的所有内容以同心布局放置，而不会移动所选节点，只会移动其他节点。

您可以找到其完整的源代码here。