1

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

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

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

  3. 在任何时候，用户都应该能够移动节点。同样，该节点应保留在用户离开它的位置。

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

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

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

我正在使用强制布局。

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

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

那么我应该使用什么方法呢？任何想法？

4

1 回答 1

1

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

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

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

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

将行为绑定到节点以允许使用鼠标或触摸进行交互式拖动。将此与节点上的调用运算符结合使用；例如，在初始化时说 node.call(force.drag)。拖动事件在鼠标悬停时设置节点的固定属性，这样一旦鼠标悬停在节点上，它就会停止移动。固定鼠标悬停，而不是鼠标按下，可以更容易地捕捉移动节点。当接收到 mousedown 事件时，在每个后续 mousemove 直到 mouseup 时，节点中心都设置为当前鼠标位置。此外，每次鼠标移动都会触发力布局的恢复，从而重新加热模拟。如果您希望被拖动的节点在拖动后保持固定，请在 dragstart 上将 fixed 属性设置为 true，如粘力布局示例中所示。

强制拖动

另见此处：强制布局节点

如果要使用链接距离函数，请在创建力布局时包含它：

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 */;
      }
    });
}
于 2013-10-05T21:09:21.993 回答