Question

我正在尝试制作网络图，其中节点按属性进行分组，并且它们通过组与两个位置（强制布局）和使用凸包进行捆绑。与this类似，但没有点击折叠/展开。对于初学者来说，该模型/代码有点过于复杂，无法进行剖析和学习。

我的问题可以简单地说一下：网络的示例代码+分组功能是否包含多个组中节点的可能性？

有时一组中只有一个节点，而基本凸包不会少于三个。上面的例子有一个修复（我不明白），this one创建不可见的节点也可能更容易。

这些组可以嵌套在多个层中。 This tutorial提供了使用d3.nest()获取层次结构中的数据所需的所有信息。但它可能不是一个层次结构，它可能是一个节点在多个组中，需要在正确的外壳和位置。某些节点不在任何组中，但仍会在网络中连接。

我知道力布局中的力是加性的，因此让组和链接以简单的方式影响节点位置不应该是一个问题，但我还没有看到这个简单的例子。我的方法是将网络连接添加到多焦点示例，看看我是否可以使其工作。

作为奖励，节点不应该重叠，对于分层元素，基础层节点应围绕一个圆圈，以便多个组中的节点位于这些组like this之间。我现在提到这些，因为对这些特征的渴望可能会影响上述需求的最佳解决方案。

我将从this JSFiddle开始建立这个建筑;随着我自己在代码上取得进展，我将继续更新和改进这个问题。我会很感激代码指向比可折叠的代码更接近我想要的代码，注意D3的限制/问题（比如需要对1-2个节点的凸包进行解决），以及代码以可理解和模块化的方式为最终目标提供这些功能之一。真的，任何帮助都表示赞赏。

Answer 1

尽管这个问题在过去一周内没有引起太多关注，但希望答案对某些人有用。我设法使用一个从linkDistance开始大的函数并根据（1）源和目标是否在同一个集合中缩小，以及（2）该集合的级别 - 即组或者子组或子组。

基本解决方案的想法来自only example I could find of this capability。我使用的实际linkDistance函数是一种简单的方法，但它可以很好地完成工作，并且可以很容易地适应许多其他人的目的（我希望）。根据您的分组，您可能希望通过我在此处使用的功能调整链接的其他功能（如颜色）。

force
    .nodes(graph.nodes)
    .links(graph.links)
    .linkDistance(function(thisLink) { 
        var myLength = 100, theSource = thisLink.source, theTarget = thisLink.target;
        groupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.7;
            }
        });
        subgroupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.4;
            }
        });
        subsubgroupNodes.forEach(function(groupList) { 
            if (groupList.indexOf(theSource) >= 0 && groupList.indexOf(theTarget) >= 0) {
                myLength = myLength * 0.2;
            }
        });
        return myLength; } )
    .linkStrength(function(l, i) { return 1; } )
    .gravity(0.05)   
    .charge(-600)   
    .friction(0.5)  
    .start();

此解决方案的一个版本以及其他改进可以在this JSFiddle找到。

虽然这可以通过调整群组成员资格的链接力来回答我的问题，但它并没有按照我原定的方式组合链接+群组的力量。我仍然希望能够让子群体“渴望”从彼此移动到角落，但受到连接它们的边缘的约束（而不是强迫它们在圆形布局上）。

请注意，我的群组被外部定义为列表清单。如果您的案例中的组成员身份是节点属性，那么您可以使用d3.nest()函数生成我必须使用map函数创建的节点组，但我不认为如果这些组可以使用有重叠的成员。

Answer 2

这是一个很好的例子，包括cytoscape.js在内的许多网络库都不允许这种复杂的分组。我有两个问题：

参考：“ 此功能只剩下让分组适当地影响力布局”，这是否会对大型网络产生很大影响？基本上，这允许布局算法将组考虑在内？
我正在尝试将您的方法迁移到d3 v4，只是想知道您是否已尝试这样做？

如何在D3.js

2 个答案: