graph – 约束d3.js强制显示

前端之家收集整理的这篇文章主要介绍了graph – 约束d3.js强制显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想用力布局做一些与众不同的事情(用于可视化图形).星座和所有星座都很有趣,但对于时间序列数据来说,它并没有那么有用.我希望能够通过某个轴约束布局,例如,根据节点在数据集中出现的时间布置节点,同时仍然保留可视化的“弹性”.这可能使用d3吗?

解决方法

要详细说明我的评论,是的,这是完全可能的.力布局实际上并不定位节点本身,它只是计算位置.在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; });
});

这是另一个使用力布局来定位标签example.在那里,x位置被忽略(即恒定),只有y受布局影响.

猜你在找的JavaScript相关文章