我是D3的新手,尝试学习部队布局。我想更改节点之间的链接距离并保持原点形状。我发现更改链接的距离后,布局也发生了更改。
图1是原始布局,然后我用代码distance([150])
(在第80行)更改了链接距离,以使节点更远,但是布局发生了超出我预期的变化。
我希望布局会随着形状保持与原始形状一样长大,但是布局会发生很大变化。我现在不确定链接距离的含义。 有人可以帮忙吗?谢谢! My code on codepen
答案 0 :(得分:1)
按照其定义,力向图表是动态的:您不能预先设置节点的位置,也不能期望节点会落在给定位置。
D3力模拟具有如此众多的参数,以至于其中一个参数的微小变化会使布局完全不同。这实际上是预期的。
因此,就您而言,这里没有什么奇怪的。您可以尝试一些不同的解决方案。在我看来,保持(大约)您想要的结构且在节点之间具有更大间隔的结构是使用forceCollide
,为中心节点设置不同的半径(橙色):
.force('collide', d3.forceCollide(function(d){
return d.id === "j" ? 100 : 50
}));
这是更新的CodePen:https://codepen.io/anon/pen/xJgYmP?editors=0010
下面是堆栈代码段中的相同代码:
graph = {
nodes: [{
id: 'a',
group: 1
},
{
id: 'b',
group: 1
},
{
id: 'c',
group: 1
},
{
id: 'd',
group: 2
},
{
id: 'e',
group: 2
},
{
id: 'f',
group: 2
},
{
id: 'g',
group: 3
},
{
id: 'h',
group: 3
},
{
id: 'i',
group: 3
},
{
id: 'j',
group: 4
}
],
links: [{
source: 'a',
target: 'b',
value: 2
},
{
source: 'a',
target: 'c',
value: 2
},
{
source: 'b',
target: 'c',
value: 1
},
{
source: 'd',
target: 'e',
value: 2
},
{
source: 'd',
target: 'f',
value: 2
},
{
source: 'e',
target: 'f',
value: 1
},
{
source: 'g',
target: 'h',
value: 1
},
{
source: 'g',
target: 'i',
value: 2
},
{
source: 'i',
target: 'h',
value: 2
},
{
source: 'a',
target: 'j',
value: 2
},
{
source: 'b',
target: 'j',
value: 1
},
{
source: 'c',
target: 'j',
value: 1
},
{
source: 'd',
target: 'j',
value: 1
},
{
source: 'e',
target: 'j',
value: 1
},
{
source: 'f',
target: 'j',
value: 1
},
{
source: 'g',
target: 'j',
value: 1
},
{
source: 'h',
target: 'j',
value: 2
},
{
source: 'i',
target: 'j',
value: 2
},
]
}
var graph = this.graph
var svg = d3.select('svg')
var width = +svg.attr('width')
var height = +svg.attr('height')
var color = d3.scaleOrdinal(d3.schemeCategory20)
var simulation = d3.forceSimulation()
.force('link', d3.forceLink().id(function(d) {
return d.id
}))
.force('charge', d3.forceManyBody())
.force('collide', d3.forceCollide(function(d) {
return d.id === "j" ? 100 : 50
}))
.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;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="container">
<svg width="960" height="600"></svg>
</div>