限制性的d3.js力导向图显示

Question

我想在力导向布局（用于可视化图形）方面做一些与众不同的事情。星座等看起来很有趣，但对于时间序列数据来说并不是特别有帮助。我希望能够通过某个轴来约束布局，例如根据数据集中节点出现的时间进行布局，同时保留可视化的“弹性”。使用d3是否可以实现这一点？

- ericmjl

---

是的，这个问题应该会给你一些指示。 - Lars Kotthoff

Answer 1

为了详细说明我的评论，是的，这是完全可能的。力导向布局实际上并不定位节点本身，它仅计算位置。在 tick 事件的处理程序中，通常提供负责定位的函数。在那里，您可以添加任意限制来限制节点移动的方式。以 stock examples 中的一个为例，您可以执行以下操作，将 x 坐标限制在预期位置的 +-10 范围内，而 y 坐标则没有限制。

force.on("tick", function() {
  node.each(function(d) {
    var intended = scale(d.value);
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px));
  });
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

这里有另一个示例，它使用力导向布局来定位标签。在此布局中，x位置被忽略（即恒定），只有y位置受到影响。

- Lars Kotthoff

---

谢谢你，Lars！我可以问一下吗？在我的情况下，应该用var xpos = scale(d.date)替换var intended = scale(d.value)，因为日期时间是我想要放在x轴上的值吗？ - ericmjl

你还没有发布任何代码，所以我不知道你的变量叫什么，但是是的，这将指定x位置。 - Lars Kotthoff

谢谢Lars！在修复了代码中的一些其他错误后，我终于能够测试它了，并且它暂时可以工作！现在需要修改比例尺以确保它正常工作。:-) 再次感谢！ - ericmjl

Answer 2

Webcola是一个用于使用D3.JS创建基于约束的布局的优秀工具。

请参阅https://github.com/tgdwyer/WebCola

- Ian Mercer

---

同意，但要注意 WebCola 缺乏文档。 - Mawg says reinstate Monica