D3力模拟中如何实现圆盘形状？

Question

我正在尝试从 Nadieh Bremer 和 Shirely Wu 的 Bussed out 重新创建令人敬畏的“点流”可视化。

我对非常​​圆形的“气泡”以及圆点到达气泡处的类似流体动力学的压缩（黑色箭头）特别感兴趣。

我的想法是通过.fx 和.fy（黑点）创建（三个）固定节点，并将所有其他节点链接到相应的固定节点。结果看起来很凌乱，甚至在它们的中心节点周围都没有形成气泡，当我降低力时，动画运行得更慢。

  const simulation = d3.forceSimulation(nodes)
    .force("collide", d3.forceCollide((n, i) => i < 3 ? 0 : 7))
    .force("links", d3.forceLink(links).strength(.06))

关于力设置的任何想法会产生更美观的结果吗？

我明白我必须随着时间的推移为小组作业制作动画以获得“涓涓细流”效果（否则所有点都会蜂拥到他们的目的地），但我想从一个漂亮的圆形开始模拟的稳定状态。

编辑

我确实检查了源代码，它只是重放预先录制的模拟数据，我猜是出于性能原因。

Answer 1

Nadieh Bremer 是我在 D3 可视化中的偶像，她是绝对的明星！ （在 OP 的 comment 之后更正：看来这个 datavis 是由 Shirley Wu 创建的......无论如何，这并没有改变我对 Bremer 的看法）。

第一次尝试找出该页面上发生的事情是查看source code，不幸的是，这是一项艰巨的工作。所以，剩下的选择就是尝试重现它。

这里的挑战不是创建一个圆形图案，这很容易：你只需要结合forceX、forceY和forceCollide：

const svg = d3.select("svg")
const data = d3.range(500).map(() => ({}));

const simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(200))
  .force("y", d3.forceY(120))
  .force("collide", d3.forceCollide(4))
  .stop();

for (let i = 300; i--;) simulation.tick();

const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 2)
  .style("fill", "tomato")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="300"></svg>

这里真正的挑战是将这些圆圈一个一个移动到给定的模拟中，而不是像我here那样同时移动。

所以，这是我的建议/尝试：

我们创建一个模拟，然后停止...

simulation.stop();

然后，在计时器中...

const timer = d3.interval(function() {etc...

...我们将节点添加到模拟中：

const newData = data.slice(0, index++)
simulation.nodes(newData);

这是结果，点击按钮：

const radius = 2;
let index = 0;
const limit = 500;
const svg = d3.select("svg")
const data = d3.range(500).map(() => ({
  x: 80 + Math.random() * 40,
  y: 80 + Math.random() * 40
}));

let circles = svg.selectAll(null)
  .data(data);
circles = circles.enter()
  .append("circle")
  .attr("r", radius)
  .style("fill", "tomato")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .style("opacity", 0)
  .merge(circles);

const simulation = d3.forceSimulation()
  .force("x", d3.forceX(500))
  .force("y", d3.forceY(100))
  .force("collide", d3.forceCollide(radius * 2))
  .stop();

function ticked() {
  circles.attr("cx", d => d.x)
    .attr("cy", d => d.y);
}

d3.select("button").on("click", function() {
  simulation.on("tick", ticked).restart();
  const timer = d3.interval(function() {
    if (index > limit) timer.stop();
    circles.filter((_, i) => i === index).style("opacity", 1)
    const newData = data.slice(0, index++)
    simulation.alpha(0.25).nodes(newData);
  }, 5)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Click</button>
<svg width="600" height="200"></svg>

这种方法的问题

如您所见，这里的熵太多了，尤其是在中心。 Nadieh Bremer/Shirley Wu 可能使用了一种更复杂的代码。但这些是我现在的两分钱，让我们看看其他答案是否会以不同的方法出现。

Answer 2

以 Gerardo 的开局为基础，

我认为避免过度熵的关键点之一是指定速度衰减 - 这将有助于避免超出所需位置。太慢，您不会在流动停止的地方增加密度，太快，并且您的节点要么过于混乱，要么超出其目的地，在太远和太短之间摇摆。

多体力在这里很有用 - 它可以使节点保持间隔（而不是碰撞力），节点之间的排斥被每个集群的定位力抵消。下面我使用了两个中心点和一个节点属性来确定使用哪一个。这些力量必须相当弱——强大的力量很容易导致过度修正。

我没有使用计时器，而是使用simulation.find() 功能从一个集群中选择一个节点并切换它被吸引到哪个中心。 1000 次后，下面的模拟将停止：

var canvas = d3.select("canvas");
var width = +canvas.attr("width");
var height = +canvas.attr("height");
var context = canvas.node().getContext('2d');

// Key variables:
var nodes = [];
var strength = -0.25;         // default repulsion
var centeringStrength = 0.01; // power of centering force for two clusters
var velocityDecay = 0.15;     // velocity decay: higher value, less overshooting
var outerRadius = 250;        // new nodes within this radius
var innerRadius = 100;        // new nodes outside this radius, initial nodes within.
var startCenter = [250,250];  // new nodes/initial nodes center point
var endCenter = [710,250];	  // destination center
var n = 200;		          // number of initial nodes
var cycles = 1000;	          // number of ticks before stopping.



// Create a random node:
var random = function() {
	var angle = Math.random() * Math.PI * 2;
	var distance = Math.random() * (outerRadius - innerRadius) + innerRadius;
	var x = Math.cos(angle) * distance + startCenter[0];
	var y = Math.sin(angle) * distance + startCenter[1];

	return { 
	   x: x,
	   y: y,
	   strength: strength,
	   migrated: false
	   }
}

// Initial nodes:
for(var i = 0; i < n; i++) {
	nodes.push(random());
}
	
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(function(d) { return d.strength; } ))
	.force("x1",d3.forceX().x(function(d) { return d.migrated ? endCenter[0] : startCenter[0] }).strength(centeringStrength))
	.force("y1",d3.forceY().y(function(d) { return d.migrated ? endCenter[1] : startCenter[1] }).strength(centeringStrength))
	.alphaDecay(0)
	.velocityDecay(velocityDecay)
    .nodes(nodes)
    .on("tick", ticked);

var tick = 0;
	
function ticked() {
	tick++;
	
	if(tick > cycles) this.stop();
	
	nodes.push(random()); // create a node
	this.nodes(nodes);    // update the nodes.

  var migrating = this.find((Math.random() - 0.5) * 50 + startCenter[0], (Math.random() - 0.5) * 50 + startCenter[1], 10);
  if(migrating) migrating.migrated = true;
  
	
	context.clearRect(0,0,width,height);
	
	nodes.forEach(function(d) {
		context.beginPath();
		context.fillStyle = d.migrated ? "steelblue" : "orange";
		context.arc(d.x,d.y,3,0,Math.PI*2);
		context.fill();
	})
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<canvas width="960" height="500"></canvas>

这是一个block view（sn-p 最好是整页，参数是为此而设计的）。初始节点与后来的节点在同一个环中形成（因此一开始会有一些冲突，但这是一个简单的解决方案）。在每个滴答声中，创建一个节点并尝试将中间附近的一个节点迁移到另一侧 - 这样就创建了一个流（与任何随机节点相反）。

对于流体，未链接的节点可能是最好的（我一直用它来模拟风） - 链接的节点非常适合像网或布这样的结构化材料。而且，和 Gerardo 一样，我也是 Nadieh 作品的粉丝，但以后还要关注 Shirley 的作品。

Answer 3

在其他答案的帮助下，我继续进行实验，我想总结一下我的发现：

圆盘形状

forceManyBody 似乎比forceCollide 更稳定。在不扭曲光盘形状的情况下使用它的关键是.distanceMax。缺点是您的可视化不再是“无标度的”，必须手动调整。作为指导，每个方向的过冲会导致不同的伪影：

将distanceMax 设置得太高会使相邻的光盘变形。

设置distanceMax 太低（低于预期的圆盘直径）：

这个神器可以在 Guardian 可视化中看到（当红点和蓝点最终形成一个巨大的圆盘时），所以我很确定 distanceMax 被使用了。

节点定位

我仍然发现使用 forceX 和 forceY 和自定义访问器函数对于更复杂的动画来说太麻烦了。我决定使用“控制”节点，只需稍加调整（chargeForce.strength(-4)、link.strength(.2).distance(1)）就可以了。

流畅感

在尝试设置时，我注意到流畅感（传入节点推动接受圆盘的边界）尤其取决于simulation.velocityDecay，但将其降低太多会增加系统的熵。

最终结果

我的示例代码将一个“人口”分成三个，然后分成五个 - 在blocks 上查看。每个接收器由一个控制节点表示。节点被分批重新分配给新的接收器，这样可以更好地控制“流”的视觉效果。开始选择节点以分配更接近接收器的位置看起来更自然（每个动画开头的单个sort）。