带有 svg 节点的 D3 图 - 如何将节点移动到任意位置

Question

我想做一个D3图，应该如下：

1. 加载html页面时，在固定位置会有一个节点。让我们说左上角。我们称之为模板节点，这个节点是不可移动的。

2. 当用户在模板节点上按下鼠标时，会在与模板节点相同的位置创建一个新节点，并且用户应该能够将新节点拖到他想要的位置。新节点应保持在用户移动到的位置。

3. 用户应该可以随时移动节点。同样，该节点应保留在用户离开它的位置。

4. 用户应该能够在任意两个节点之间绘制链接。让我们假设如果他从一个节点拖动到另一个节点而不按住 ctrl 键，则绘制一个链接，如果他在按住 control 键的同时拖动，则节点移动。

5. 在两个节点之间绘制链接时，节点不应改变位置。

6. 当两个节点被链接并通过拖动其中一个节点移动时，链接的大小和方向应根据需要更改。

---

我正在使用强制布局。

我能够创建一个模板节点，但它总是指向容器的中心——我认为这是因为容器的中心是重心。但不知道如何通过代码将其位置固定在左上角。

我可以创建链接和新节点。但是节点移动并且链接调整大小。可能是因为力布局试图使链接长度等于力布局中的链接距离。但我不知道如何使用链接距离函数？我什至不确定这是否真的有帮助。

那么我应该使用什么方法呢？有什么想法吗？

Answer 1

对于强制布局，您可以将节点的 'fixed' 属性设置为 true，以防止其受到模拟的影响。之后，您应该可以手动设置它的位置。您可以选择在函数调用中执行此操作：

function pinNode(node) {
  node.fixed = true;
}

function unpinNode(node) {
  node.fixed = false;
}

我相信你可以通过这样的调用获得左上角的节点：pinNode(node, 0, 0)。只要节点的固定属性设置为 true，它就应该不受 sim 影响。您可能会发现文档中的这个 sn-p 很有帮助；它描述了固定属性如何受 force.drag 影响：

将行为绑定到节点以允许交互式拖动，或者使用 鼠标或触摸。将此与呼叫操作员结合使用 节点；例如，在初始化时说 node.call(force.drag)。 拖动事件在鼠标悬停时设置节点的固定属性，例如 只要鼠标在一个节点上，它就会停止移动。固定在 mouseover，而不是 mousedown，更容易捕捉移动 节点。当接收到 mousedown 事件时，以及随后的每个 mousemove 直到 mouseup，节点中心设置为当前鼠标 位置。此外，每次鼠标移动都会触发力的恢复 布局，重新加热模拟。如果要保留拖动的节点 拖动后固定，在dragstart上将fixed属性设置为true，如 在粘力布局示例中。

force.drag

另见此处：force layout nodes

如果您想使用链接距离函数，请在创建强制布局时包含它：

var force = d3.layout.force()
    .size(width, height)
    .linkStrength(0.5) // how much can link distance be overridedn by the simulation
    .linkDistance(function() {return /* some evaluation */;});

// ...

// You might need to defer the calculation of linkDistance until later,
// such as in update(), since nodes might not have the properties
// that you need to check until that point:

function update() {
  force
    .nodes(nodes)
    .links(links)
    .linkDistance(function(link) {
      // The function gets called for each link in the simulation.
      // Each link will be connected to two nodes, source and target, 
      // which may be useful in determining link distance.
      if (link.source.someProperty || link.target.somePropery) {
        return /* something */;
      } else {
        return /* something else */;
      }
    });
}