D3画布强制定向布局底部问题答案

【问题标题】：D3 canvas force directed layout bottom issueD3画布强制定向布局底部问题
【发布时间】：2018-05-08 19:20:27
【问题描述】：

我试图在布局中拖动时包含/绑定节点。我尝试修改示例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));
}

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

【问题讨论】：

标签： d3.js

【解决方案1】：

我猜你只是在 x 轴和 y 轴上使用了 width 变量时犯了一个错误。使用 height 变量作为 y 轴应该没问题：

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

【讨论】：