D3js v5中的有限静态力布局

Question

有限的静态力布局-帮助？

如何在手动调用Simulation.tick（）的情况下创建有界静力布局？

在D3js documentation中，我们看到手动运行sim卡时未调度“ tick”事件。通常，可以为每个刻度事件将x和y值强加一个界限（请参阅此bounded force layout）。因此，这个问题集中在如何使节点的x和y坐标遵守模拟的每个刻度上的边界上。

例如，我们可以在此块上放置边界，以使节点的x和y值保持在红色框中？

失败＃1

我试图创建一个边界框力函数。不知道这里发生了什么。

代码

所有code for these examples is available on Observable。

Answer 1

您的代码的问题不是缺少事件，而是模拟力的错误设置。原始示例使用定位力List<int> listOfOnlyPrices = []; List<int> listOfOnlyExpenses = []; int totalSales; int totalExpenses; void totalSalesWidget() { listOfOnlyPrices = items.map<int>((SaleEntry int) => int.price).toList(); totalSales = listOfOnlyPrices.reduce((a, b) => a + b); } void totalExpensesWidget() { listOfOnlyExpenses = expenseList.map<int>((ExpenseEntry int) => int.priceEx).toList(); totalExpenses = listOfOnlyExpenses.reduce((a, b) => a + b); } 和d3.forceX的默认值为0的值进行构建。这将所有计算围绕原点进行。通过将d3.forceY元素转换为g和width/2，将整个shebang集中在视口中。自从您注释掉翻译后，此居中不再将您的节点拖到上下边界。

可以通过正确配置定位力来轻松解决此问题：

height/2

这会将布局的中心放到边界矩形的中心。

尽管这已经起作用，但您可能想降低排斥力，该力太强，迫使大多数节点位于外边界。将该值的一半立即产生视觉上令人愉悦的结果。

.force("x", d3.forceX(d3.mean(xExtent)))
.force("y", d3.forceY(d3.mean(yExtent)))

这是更新后的notebook。

Answer 2

Fil调整了我的失败＃1来创建以下解决方案：

Code for this solution is on Observable。