我有一个使用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
脚本,以生成第二个图像中所示的布局呢?
发布于 2012-08-10 12:51:58
首先,增加了电荷强度,降低了链路距离。这样做更强调全球结构,而不是局部联系。此外,如果增加足够的电荷强度,排斥性电荷甚至会将直接连接的节点推得更远,从而有效地增加链接距离,同时提供更好的整体结构。(更强的电荷力的缺点是图形初始化更加混乱,但这对于静态布局应该不是问题。)
其次,您可能需要增加迭代次数或添加自定义强制以获得更好的结果。强制布局通常在任意图形上工作得很好,但不能保证它们会产生最佳(甚至是好的)结果。对于可以进行简化假设的任何图形(例如,trees),可以应用其他力或约束,以鼓励模拟收敛到更好的解决方案。
https://stackoverflow.com/questions/11894057
复制相似问题