在 d3.js 中配置固定布局的静态图

Posted 2023-02-22

【中文标题】在 d3.js 中配置固定布局的静态图

【英文标题】：Configure fixed-layout static graph in d3.js

【发布时间】：2012-08-07 07:21:39

【问题描述】：

我有一个使用d3.js 的静态图的工作代码示例（仅<script type="text/javascript"> 部分），如下所示：

        /* Create graph data */
        var nodes = [];
        for (var i = 0; i < 13; i++) 
        
            var datum = 
                "value": i
            ;
            nodes.push(datum);
        

        var links = ["source": 0, "target": 1,
                     "source": 1, "target": 2,
                     "source": 2, "target": 0,
                     "source": 1, "target": 3,
                     "source": 3, "target": 2,
                     "source": 3, "target": 4,
                     "source": 4, "target": 5,
                     "source": 5, "target": 6,
                     "source": 5, "target": 7,
                     "source": 6, "target": 7,
                     "source": 6, "target": 8,
                     "source": 7, "target": 8,
                     "source": 9, "target": 4,
                     "source": 9, "target": 11,
                     "source": 9, "target": 10,
                     "source": 10, "target": 11,
                     "source": 11, "target": 12,
                     "source": 12, "target": 10];

        /* Create force graph */
        var w = 800;
        var h = 500;

        var size = nodes.length;
        nodes.forEach(function(d, i)  d.x = d.y = w / size * i);

        var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("weight", h);

        var force = d3.layout.force()
                      .nodes(nodes)
                      .links(links)
                      .linkDistance(200)
                      .size([w, h]);

        setTimeout(function() 

            var n = 400
            force.start();
            for (var i = n * n; i > 0; --i) force.tick();
            force.stop();

            svg.selectAll("line")
               .data(links)
               .enter().append("line")
               .attr("class", "link")
               .attr("x1", function(d)  return d.source.x; )
               .attr("y1", function(d)  return d.source.y; )
               .attr("x2", function(d)  return d.target.x; )
               .attr("y2", function(d)  return d.target.y; );

            svg.append("svg:g")
               .selectAll("circle")
               .data(nodes)
               .enter().append("svg:circle")
               .attr("class", "node")
               .attr("cx", function(d)  return d.x; )
               .attr("cy", function(d)  return d.y; )
               .attr("r", 15);

            svg.append("svg:g")
               .selectAll("text")
               .data(nodes)
               .enter().append("svg:text")
               .attr("class", "label")
               .attr("transform", function(d)  return "translate(" + d.x + "," + d.y + ")"; )
               .attr("text-anchor", "middle")
               .attr("y", ".3em")
               .text(function(d)  return d.value; );

        , 10);

它会产生这种相当混乱的布局：

虽然它在技术上是正确的图形，但理想的布局应该是这样的（忽略不同的视觉图形）：

注意布局应该是固定的，这样重新加载页面不会改变每个节点的定位；布局也应该是静态的，因为没有动画效果并且节点不可拖动。上面的脚本已经实现了这两个要求。

那么我应该如何进一步配置这个d3 脚本以生成第二张图片中显示的布局？

【参考方案1】：

首先，增加充电强度和减少链接距离。这样做更加强调全局结构而不是本地连接。此外，如果电荷强度足够大，排斥电荷甚至会将直接连接的节点推得更远，从而有效地增加链接距离，同时提供更好的整体结构。 （充电力更强的缺点是图初始化更混乱，但这对于静态布局来说应该不是问题。）

其次，您可能需要增加迭代次数或添加自定义力以获得更好的结果。强制布局通常适用于任意图，但不能保证它们会产生最佳（甚至是好的）结果。对于您可以进行简化假设的任何图表（例如，trees），您可能会应用额外的力或约束来鼓励模拟收敛到更好的解决方案。

【讨论】：

更大的充电强度和更小的链接距离可以解决问题。关于添加自定义部队，有没有我可以遵循的示例/教程？您能否举一些附加约束的例子，这些约束可以用于更好的收敛？非常感谢！

有关自定义部队，请参阅我的 talk on force layouts 和随附的幻灯片。