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

Question

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

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

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

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

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

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

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

<小时/>

我正在使用强制布局。

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

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

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

Answer 1

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

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

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

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

Bind a behavior to nodes to allow interactive dragging, either using the mouse or touch. Use this in conjunction with the call operator on the nodes; for example, say node.call(force.drag) on initialization. The drag event sets the fixed attribute of nodes on mouseover, such that as soon as the mouse is over a node, it stops moving. Fixing on mouseover, rather than on mousedown, makes it easier to catch moving nodes. When a mousedown event is received, and on each subsequent mousemove until mouseup, the node center is set to the current mouse position. In addition, each mousemove triggers a resume of the force layout, reheating the simulation. If you want dragged nodes to remain fixed after dragging, set the fixed attribute to true on dragstart, as in the sticky force layout example.

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