javascript - 单节点图对 forceCenter 没有反应？

Question

我正在使用单个节点启动图形项目。当我将它拖到某个地方时，我希望它能顺利地回到 svg 的中心，但不是那样，它出现故障回到中心。

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

Codepen full example

我认为我可能没有正确配置 forceCenter()，或者可能因为没有其他节点，没有其他主体可以与之交互，所以这就是 D3 的工作方式。

Answer 1

...maybe since there is no other node, there is no other body to interact with so this is how D3 would work.

是的，您的直觉在这里(部分)正确，这种力模拟没有任何问题。我估计这里的问题来自于对forceCenter的目的的误解:forceCenter并不能使节点顺利的到达指定位置(下面会详细介绍)。实际上，如果您在该模拟中有另一个节点，您会发现，通过拖动一个节点，另一个节点也会移动，因此质心保持在同一位置。

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