基于两个D3示例:力学布局(http://bl.ocks.org/mbostock/1095795)和聚类力学布局(http://bl.ocks.org/mbostock/1748247),我成功地构建了一个具有几个独立的引力点的力学布局,以控制节点在节点之间的链接上的位置。
// Set up map
function map_init(){
force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.on("tick", tick);
svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
link = $map.selectAll(".link");
node = $map.selectAll(".node");
d3.json("graph.json", function(error, graph) {
// set up nodes
for( i = 0; i < graph.nodes.length; i++ ){
nodes.push( graph.nodes[i] );
}
// position nodes to three different gravity centres based on theme
for( i = 0; i < nodes.length; i++ ){
if ( nodes[i].theme == "theme1" ){
nodes[i].cx = 100;
nodes[i].cy = 100;
} else if ( nodes[i].theme == "theme2" ){
nodes[i].cx = 300;
nodes[i].cy = 300;
} else if ( nodes[i].theme == "theme3" ){
nodes[i].cx = 500;
nodes[i].cy = 500;
}
}
// link nodes of the same theme
theme1_nodes = nodes.filter(function(d){ return (d.theme == "theme1"); });
theme2_nodes = nodes.filter(function(d){ return (d.theme == "theme2"); });
theme3_nodes = nodes.filter(function(d){ return (d.theme == "theme3"); });
for (i = 0; i < theme1_nodes.length-1; i++){
links.push({ source: theme1_nodes[i], target: theme1_nodes[i+1] });
}
for (i = 0; i < theme2_nodes.length-1; i++){
links.push({ source: theme2_nodes[i], target: theme2_nodes[i+1] });
}
for (i = 0; i < theme3_nodes.length-1; i++){
links.push({ source: theme3_nodes[i], target: theme3_nodes[i+1] });
}
start();
});
}
// Start
function start() {
link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
link.enter()
.insert("svg:line")
.attr("class", "link");
link.exit()
.remove();
node = node.data(force.nodes(), function(d) { return d.id; });
var nodeEnter = node.enter()
.append("svg:g")
.attr("class", "node");
.on("click", map_nodeClick);
node.exit().remove();
// Enter node information
nodeEnter.each(function(d) {
theTitle = d3.select(this).append("svg:text")
.attr("font-family", "Helvetica")
.attr("class", "title")
.text( d.title );
});
// More content to go into each node
// .
// .
// .
force.start();
}
// Tick
function tick(e) {
node
.each(gravity(.2 * e.alpha))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
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; });
}
// Gravity
function gravity(alpha) {
return function(d) {
d.y += (d.cy - d.y) * alpha;
d.x += (d.cx - d.x) * alpha;
};
}
// Set up when page first loads
map_init();
为了在不重新加载页面的情况下重置/重新启动力导向布局,我将以下函数绑定到重置按钮:
// Remove force layout and data
function map_remove(){
node.remove();
link.remove();
svg.remove();
nodes = [];
links = [];
}
// Reset button
$('a#reset').click(function(e){
e.preventDefault();
map_remove();
map_init();
});
这个网页可以在一组人可访问的设备上显示。每天早上只加载一次,然后在iPad Safari上运行12个小时。节点之间的链接理想情况下会根据用户输入动态更改(待实现)。除了力导向布局外,网页上还有其他信息。需要提供一个重新启动/重置力导向布局而不重新加载页面的选项。
- 有没有内置的方法来销毁D3力导向布局及其数据?
- 目前这个方法工作正常,因为没有创建额外的DOM元素,并且检查器中没有发现错误。但我不确定如何检查所有的D3对象是否已被清除/清空,以便不存储/累积重复数据?
- 当前每次重置都会将节点拉近到地图中心,我在map_remove()函数中漏掉了什么吗?
- 完全重新启动D3力导向布局是否会在任何时候提高浏览器的性能?即清除绘制SVG的内存?
splice()
吗? - Carr