青色の任意の場所をクリックして、ノードを追加します。追加されます。ドラッグは機能します-dragstarted、draged、dragendedでconsole.logを実行し、ドラッグされていることを確認できます。他のノードでさえ、ファントムノードの邪魔にならないように適切に移動します！しかし、視覚的にはそこにあるだけです。
私は何か基本的なものが欠けているに違いありません。私は何が間違っているのですか？
これがコードとフィドルです
<body>
<script src="d3.min.js"></script>
<script>
var width = 640,
height = 480;
var graphNodes = [
{ id: 0, r: 5 },
{ id: 1, r: 5 },
{ id: 2, r: 5 },
{ id: 3, r: 5 },
{ id: 4, r: 5 },
{ id: 5, r: 5 },
{ id: 6, r: 5 },
{ id: 7, r: 5 },
{ id: 8, r: 5 }
];
var graphEdges = [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 0, target: 5 },
{ source: 0, target: 6 },
{ source: 0, target: 7 },
{ source: 0, target: 8 }
];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
svg.append('rect')
.attr('class', 'graph')
.attr('width', width)
.attr('height', height)
.attr('fill', 'lightblue')
.attr('opacity', 0.3)
.on('click', function(){
graphNodes.push({ id: graphNodes.length, r: 15 });
update(d3.mouse(this));
});
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d, i) { return i; }))
.force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(16) )
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("y", d3.forceY(0))
.force("x", d3.forceX(0));
var linkGroup = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graphEdges)
.enter().append("line")
.attr('stroke', 'gray')
.attr("stroke-width", 2);
var nodeGroup = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graphNodes)
.enter().append("circle")
.attr("r", function(d){ return d.r; })
.attr("fill", "gray")
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended));
function dragstarted(d){
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
simulation.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;
simulation.alphaTarget(0.1);
}
function ticked(){
linkGroup
.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; });
//nodeGroup.attr("cx", function(d){ return d.x;}).attr("cy", function(d){ return d.y;})
nodeGroup.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
}
function update(coordinates) {
// Redefine and restart simulation
simulation.nodes(graphNodes).on("tick", ticked);
simulation.force("link").links(graphEdges);
// Update links
var link = linkGroup.selectAll("line").data(graphEdges),
linkEnter = link.enter().append("line");
link = linkEnter.merge(link);
link.exit().remove();
// Update nodes
var node = nodeGroup.data(graphNodes),
nodeEnter = node.enter().append("circle")
.attr("r", function(d){ return d.r; })
.attr("fill", "gray")
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended));
node = nodeEnter.merge(node);
node.exit().remove();
}
simulation.nodes(graphNodes).on("tick", ticked);
simulation.force("link").links(graphEdges);
</script>
</body>
あなたはtickedノードを動かすためにあなたのイベントに頼っています。あなたのtickedイベントはかかわらず、で動作nodeGroup変数。クリックハンドラーとupdate関数。ただし、ローカルnode変数を作成して操作します（つまり、新しく入力したノードがの一部になることはありませんnodeGroup）。
の簡単な変更updateは次のとおりです。
node = nodeEnter.merge(node);
これになるために：
nodeGroup = nodeEnter.merge(node);
これを修正すると、入力ノードの位置を明示的に設定する必要がなくなることもわかります（つまり、これらの行は不要になります）。
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
実行中のコード：
<html>
<head>
<script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 640,
height = 480;
var graphNodes = [
{ id: 0, r: 5 },
{ id: 1, r: 5 },
{ id: 2, r: 5 },
{ id: 3, r: 5 },
{ id: 4, r: 5 },
{ id: 5, r: 5 },
{ id: 6, r: 5 },
{ id: 7, r: 5 },
{ id: 8, r: 5 }
];
var graphEdges = [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 0, target: 5 },
{ source: 0, target: 6 },
{ source: 0, target: 7 },
{ source: 0, target: 8 }
];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
svg.append('rect')
.attr('class', 'graph')
.attr('width', width)
.attr('height', height)
.attr('fill', 'lightblue')
.attr('opacity', 0.3)
.on('click', function(){
graphNodes.push({ id: graphNodes.length, r: 15 });
update(d3.mouse(this));
});
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d, i) { return i; }))
.force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(16) )
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("y", d3.forceY(0))
.force("x", d3.forceX(0));
var linkGroup = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graphEdges)
.enter().append("line")
.attr('stroke', 'gray')
.attr("stroke-width", 2);
var nodeGroup = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graphNodes)
.enter().append("circle")
.attr("r", function(d){ return d.r; })
.attr("fill", "gray")
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended));
function dragstarted(d){
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
simulation.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;
simulation.alphaTarget(0.1);
}
function ticked(){
linkGroup
.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; });
//nodeGroup.attr("cx", function(d){ return d.x;}).attr("cy", function(d){ return d.y;})
nodeGroup.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
}
function update(coordinates) {
// Redefine and restart simulation
simulation.nodes(graphNodes).on("tick", ticked);
simulation.force("link").links(graphEdges);
// Update links
var link = linkGroup.selectAll("line").data(graphEdges),
linkEnter = link.enter().append("line");
link = linkEnter.merge(link);
link.exit().remove();
// Update nodes
var node = nodeGroup.data(graphNodes),
nodeEnter = node.enter().append("circle")
.attr("r", function(d){ return d.r; })
.attr("fill", "gray")
// .attr('cx', coordinates[0])
// .attr('cy', coordinates[1])
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended));
nodeGroup = nodeEnter.merge(node);
node.exit().remove();
}
simulation.nodes(graphNodes).on("tick", ticked);
simulation.force("link").links(graphEdges);
</script>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加