时间戳

首页 > 解决方案 > 使用 D3.js 强制时如何防止气泡接触 svg 框架/边框？

svg - 使用 D3.js 强制时如何防止气泡接触 svg 框架/边框？

问题描述

我正在使用 D3.js 库来开发气泡图。我从互联网上获得了一些样本，它们使用力模拟来显示气泡节点。我非常喜欢它，并考虑将它包含在我的项目中，但有时会出现气泡被周围的 SVG 框架/边框切割的问题。我尝试理解和调试代码，得出的结论是气泡的最终位置是由力模拟决定的。我想到了以下2个解决方案：

  1. 限制指定区域内的气泡（实际SVG帧大小可以更大）
  2. 由于 D3 力模拟，根据气泡占据的区域预先定义框架的大小（宽度/高度）。换句话说，确定将通过力模拟计算的区域，然后定义 SVG 宽度/高度

有没有一种方法可以实现我提到的两种解决方案之一？是否有任何其他解决方案可以防止力模拟气泡不接触 SVG 框架/边框？

标签： svgd3.jsbubble-chart

解决方案

第二种方法是不可行的，因为力模拟太非线性且不可预测，无法预先确定其作用区域。此外，根据作用力，节点可以无限期地排斥自己，因此在模拟期间扩展 SVG 可以创建一个不断扩展的 SVG 元素。

第一种方法是要走的路。要限制气泡，您可以编辑更新位置的函数（在示例中通常称为ticked() ）并使用Math.min()和Math.max()手动添加边界：

以下代码是此示例的片段：

function tick() {
    node
      .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, 
          d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, 
          d.y)); });
  }

注意事项：

  1. 记住要考虑气泡的半径，以便它可以与边界相切。

  2. 请注意，代码不仅返回限制值，还将其分配给 dx 和 dy 这是必要的，因为模拟使用 dx 和 dy 的当前值来计算模拟的下一帧。

推荐阅读