在 D3 力布局图中,我尝试根据它们的组强制某些节点留在给定区域。
有一个中心节点,是固定的。我希望由红线连接的节点位于屏幕高度的前 1/3,由笔划线连接的节点位于第二个 1/3,由蓝线连接的节点位于后 1/3。
但我希望它顺利:在加载时,节点移动到给定区域,并远离其他区域。与中心节点的距离可能不是固定的。
每组中的节点数是可变的。
如何使用 d3.js v4 实现这一目标?
感谢您的帮助:)
最佳答案
你必须使用 forceX
,它:
Creates a new positioning force along the x-axis towards the given position x. If x is not specified, it defaults to 0.
在此演示中(基于 this Bostock's code),nodes
数组包含一个 group
:
nodes:[
{"id": "A", "group": 1},
{"id": "B", "group": 2},
{"id": "C", "group": 2},
//etc...
]
使用此 group
值,我们可以将节点定位到左侧或右侧。这只是一个示例,根据您的代码进行更改:
.force("x", d3.forceX(function(d){
if(d.group === 2){
return width/3
} else if (d.group === 3){
return 2*width/3
} else {
return width/2
}
}))
因此,如果节点属于第 2 组(青色节点),我们将其放置在宽度的 1/3 处,如果它属于第 3 组(橙色节点),我们将其放置在宽度的 2/3 处。
定位并不完美,因为其他参数会影响它,如电荷强度和链路距离。
这是一个演示:
var graph = {
nodes:[
{"id": "A", "group": 1},
{"id": "B", "group": 2},
{"id": "C", "group": 2},
{"id": "D", "group": 2},
{"id": "E", "group": 2},
{"id": "F", "group": 3},
{"id": "G", "group": 3},
{"id": "H", "group": 3},
{"id": "I", "group": 3}
],
links:[
{"source": "A", "target": "B", "value": 1},
{"source": "A", "target": "C", "value": 1},
{"source": "A", "target": "D", "value": 1},
{"source": "A", "target": "E", "value": 1},
{"source": "A", "target": "F", "value": 1},
{"source": "A", "target": "G", "value": 1},
{"source": "A", "target": "H", "value": 1},
{"source": "A", "target": "I", "value": 1},
]
};
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))
.force("charge", d3.forceManyBody())
.force("x", d3.forceX(function(d){
if(d.group === 2){
return width/3
} else if (d.group === 3){
return 2*width/3
} else {
return width/2
}
}))
.force("y", d3.forceY(height/2))
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
<svg width="400" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
关于javascript - D3 强制布局 : How to force a group of node to stay in a given area,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40941524/