在有界力布局中，链接的节点将超出矩形

Question

我试图在布局中绑定拖动的节点。

我使用以下代码修改了示例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(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));
}

function dragended() {
  if (!d3.event.active) simulation.alphaTarget(0);
  //d3.event.subject.fx = null;
  //d3.event.subject.fy = null;
}

以上更改允许节点粘贴，拖动的节点保持在矩形中，但是，链接的节点将超出矩形。

我指的是Bounded Force Layout示例，因为它在SVG中我无法弄清楚如何停止从布局中出去的链接节点（连接到拖动的节点）。

Answer 1

这里SVG和canvas之间的区别相对容易修复。

在链接的svg example中，勾选的函数使用该元素的绑定数据为每个svg元素做一些逻辑 - 这是数据数组中的一个对象：

  function tick() {

    node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
     ...

由于我们没有要处理的元素，我们可以操作原始数据数组：

  function ticked() {

    graph.nodes.forEach(function(d) { 
      d.x = Math.max(margin, Math.min(width - margin, d.x))
      d.y = Math.max(margin, Math.min(height - margin, d.y))
    })
...

这里使用你的拖拽功能和原始力量画布示例example。