单节点图不对forceCenter做出反应？

Question

我正在用一个节点开始一个图形项目.当我在某个地方拖动它,我希望它平稳地回到SVG的中心,而是这样,这毛刺回中心.

var simulation = d3.forceSimulation()
  .force("center", d3.forceCenter(svgWidth/2, svgHeight/2));

Codepen完整的例子

我想我可能没有正确配置forceCenter()或者因为没有其他节点,所以没有其他机构可以与之交互,所以这就是D3的工作原理.

Answer 1

...也许因为没有其他节点,没有其他机构可以与之交互,所以这就是D3的工作方式.

是的,你的直觉在这里是(部分)正确的,这种力模拟没有任何问题.我认为这里的问题来自于对目的的误解forceCenter:forceCenter不会使节点顺利进入指定位置(更多内容如下).实际上,如果你在该模拟中有另一个节点,你会看到,通过拖动一个节点,另一个节点也会移动,因此质心停留在同一个地方.

话虽这么说,你可以看到它按预期工作 - 也就是说,节点平稳地回到中心 - 如果,而不是forceCenter你使用forceX和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>