d3.js - 在有界力布局中，链接的节点超出了矩形范围

Question

我正在尝试在布局中绑定(bind)拖动的节点。

我修改了示例 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中，ticked 函数使用该元素的绑定(bind)数据(数据数组中的一个对象)为每个 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使用您的拖动功能和原始的力 Canvas 示例。