D3帆布力导向布局底部问题

时间:2018-05-08 19:20:27

标签: d3.js

我试图在布局中拖动时包含/绑定节点。 我尝试修改示例Force Dragging III Canvas 并添加了以下代码:

function dragstarted() {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.subject.x)) ;
  d3.event.subject.fy = Math.max(10, Math.min(width - 10, d3.event.subject.y)) ;
}

function dragged() {
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.x));
  d3.event.subject.fy = Math.max(10, Math.min(width - 10, d3.event.y));
}

虽然我能够将运动限制在顶部,左右方向,但似乎底部拖动有问题;它到达矩形底部后不会停止。请帮忙。

1 个答案:

答案 0 :(得分:2)

我猜你只是因为x轴和y轴的width变量而犯了一个错误。对于y轴使用height变量应该没问题:

function dragstarted() {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.subject.x)) ;
  d3.event.subject.fy = Math.max(10, Math.min(height - 10, d3.event.subject.y)) ;
}

function dragged() {
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.x));
  d3.event.subject.fy = Math.max(10, Math.min(height - 10, d3.event.y));
}