Question

我想用力布局做一些与众不同的事情（用于可视化图形）。星座和所有星座都很有趣，但对于时间序列数据，它并没有那么有用。我希望能够通过某个轴约束布局，例如，通过根据节点在数据集中出现的时间来布置节点，同时仍然保留节点＆＃34; bouncyness＆＃34;可视化。这可能是使用d3吗？

Answer 1

详细说明我的评论，是的，这是完全可能的。力布局实际上并不定位节点本身，它只是计算位置。在tick事件的处理程序中，您通常会提供负责定位的函数。在那里，您可以添加限制节点移动方式的任意约束。

选择其中一个stock examples，您可以执行以下操作，将x坐标限制在预定位置的+ -10范围内，且不受限制。

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; });
});

这是另一个使用力布局来定位标签的example。在那里，x位置被忽略（即不变），只有y受到布局的影响。

Answer 2

Webcola是使用D3.JS创建基于约束的布局的绝佳工具。

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

约束d3.js强制显示

2 个答案: