When we used it in non-vue projects, we always introduced the v5 version online. When copying and pasting the previous code modification into the vue project, we will encounter a problem:
It is successful when drawing the force-guided graph, but when we try to drag the node, we will find that the node cannot be dragged, and the two lines selected in red will report an error , but in the previous v5 version, there is no of this problem.
Error code:
Error message:
No corresponding information was found on the Internet, only two questions about this problem were found on a foreign website, so I can only find the problem by myself.
First of all, we need to know these functions started, draggedwhich endedare used to control the dragging of nodes.
Make a breakpoint, and we can see the specific data of the incoming d:
there is below d active, so we can guess that we can directly change the if condition to !d.active, and then Combined with the code of this part of the d3 instance (although the structure is different, it is of reference significance):
finally modify the code to the following, and find that the node can be dragged normally!
function started(d) {
if (!d.active) {
forceSimulation.alphaTarget(0.8).restart();
}
d.subject.fx = d.subject.x;
d.subject.fy = d.subject.y;
}
function dragged(d) {
d.subject.fx = d.x;
d.subject.fy = d.y;
}
function ended(d) {
if (!d.active) {
forceSimulation.alphaTarget(0);
}
d.subject.fx = null;
d.subject.fy = null;
}
Effect:
You can refer to the use of d3-force-guided diagram (4) in this article and the problems that may be encountered in the vue project