javascript - 单节点图对 forceCenter 没有反应?
问题描述
我正在使用单个节点开始一个图形项目。当我将它拖到某个地方时,我希望它能够顺利回到 svg 的中心,但不是那样,它会回到中心。
var simulation = d3.forceSimulation()
.force("center", d3.forceCenter(svgWidth/2, svgHeight/2));
我想我可能没有正确配置 forceCenter() 或者可能因为没有其他节点,没有其他主体可以交互,所以这就是 D3 的工作方式。
解决方案
...也许因为没有其他节点,没有其他实体可以交互,所以这就是 D3 的工作方式。
是的,你的直觉在这里(部分)是正确的,这种力模拟没有任何问题。我认为这里的问题来自对目的的误解forceCenter
:forceCenter
不会使节点顺利到达指定位置(更多内容见下文)。实际上,如果您在该模拟中有另一个节点,您会看到,通过拖动一个节点,另一个节点也会移动,因此质心保持在同一位置。
话虽如此,您可以看到它按预期工作——也就是说,节点顺利回到中心——如果forceCenter
你使用forceX
and forceY
...
var simulation = d3.forceSimulation()
.force("x", d3.forceX(svgWidth / 2))
.force("y", d3.forceY(svgHeight / 2));
...不更改任何alpha
,alphaTarget
等velocityDecay
...
这是仅具有该更改的代码:
////////////////////////////////////////////////////
// SVG setup
////////////////////////////////////////////////////
var svgWidth = 400,
svgHeight = 400;
var svgRef = d3.select("body").append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
svgRef.append("rect")
.attr("width", svgWidth)
.attr("height", svgHeight);
////////////////////////////////////////////////////
// Data
////////////////////////////////////////////////////
var nodes_data = [{id: "0"}];
var links_data = [];
////////////////////////////////////////////////////
// Links and nodes setup
////////////////////////////////////////////////////
var linksRef = svgRef.selectAll(".link")
.data(links_data).enter()
.append("line")
.attr("class", "link");
var nodesRef = svgRef
.selectAll(".node")
.data(nodes_data).enter()
.append("g").attr("class", "node")
.append("circle")
.attr("r", 10)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
////////////////////////////////////////////////////
// Simulation setup
////////////////////////////////////////////////////
var simulation = d3.forceSimulation()
.force("x", d3.forceX(svgWidth / 2))
.force("y", d3.forceY(svgHeight / 2));
simulation.nodes(nodes_data).on("tick", ticked);
simulation.force("link").links(links_data);
function ticked() {
nodesRef.attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")";})
linksRef.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; });
}
////////////////////////////////////////////////////
// Dragging
////////////////////////////////////////////////////
function dragstarted (d) {
if (!d3.event.active) simulation.alphaTarget(1).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;
}
.link {
stroke: #000;
stroke-width: 2px;
}
.node {
fill: #CCC;
stroke: #000;
stroke-width: 1px;
}
rect {
fill: none;
stroke: #000;
stroke-width: 2px;
pointer-events: all;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
推荐阅读
- database - 这个数据库是 3NF 还是 BCNF?
- kotlin - 用于多个 JVM 目标的 Kotlin 库
- python - 使用 Tensrorflow 和 cifar10 进行深度学习
- javascript - Firestore 不提供数据,即使它存在
- python - 如何在不达到 Python 中的最大迭代次数的情况下将字符串数组添加到二叉树中?
- arrays - 如何在html角度组件中显示数组属性的值
- python - Python列表中的#符号是什么意思?
- google-chrome - 内容脚本未插入 YouTube 结果页面
- javascript - How to toggle a boolean state to show/hide a component/div?
- node.js - 无头浏览器 + OCR 解决验证码