0
私はD3.js V4 Forceレイアウトを持っています。これは、1つのエッジでリンクされた2つのノードから構成されています。 1つのノードは左上近くに固定され、もう1つは自由に動くことができます。D3.js v4強制レイアウトと固定ノードの異常
レイアウトが実行されると、非固定ノードはレイアウトの途中から開始され、固定ノードから離れて移動します。それは固定ノードとは反対側のコーナーで終わる。
フリーノードは、レイアウトの中心（重力が引っ張られる）と固定ノード（リンク力によって引っ張られる）との間で終わることが予想されます。私は何が欠けていますか？
var width = 240,
height = 150;
var nodes = [
{ // Larger node, fixed
fx: 20, fy: 20, r: 10
},
{ // Small node, free
r: 5
}];
var links = [{ // Link the two nodes
source: 0, target: 1
}
];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
// Create simulation with layout-centring and link forces
var force = d3.forceSimulation()
.force("centre", d3.forceCenter(width/2, height/2))
.force("link", d3.forceLink())
.nodes(nodes);
force.force("link").links(links);
// Draw stuff
var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');
var node = svg.selectAll('.node')
.data(nodes)
.enter().append('circle')
.attr('class', 'node')
force.on('tick', function() {
node.attr('r', function(d) {
return d.r;
})
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return 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;
});
});<script src="https://d3js.org/d3.v4.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
.node {
fill: #f00;
stroke: #fff;
stroke-width: 2px;
}
.link {
stroke: #777;
stroke-width: 2px;
}
</style>
</head>
<body>
</body>
</html>
ああ、ありがとう。私はv3で使用した重力のように動作することを期待していましたが、常に中心に向かってドラッグします。私はあなたが引用したビットを読んだが、その意味を消化しなかった。 – willw