javascript - D3.js:将节点放置在其他节点内

Question

嗨 stackoverflow 社区，

我正在寻找一种解决方案，以使用 d3 将节点放置在更大的节点中，因为我需要显示图形的某些部分发生在特定区域。

输入是一个 JSON 对象，如下所示:

{
    "nodes": [
        {"id": "sourcSink1", "label": "sourcSink1", "compartment": null},
        {"id": "process1", "label": "process1", "compartment": null},
        {"id": "element1", "label": "element1", "compartment": "compartment1"},
        {"id": "compartment1", "label":"compartment1", "compartment": null},
    ]

    "edges": [
        {"source": "sourcSink1", "target": "process1", "class": 1},
        {"source": "process1", "target": "element1", "class": 2},
    ]
}

节点“compartment1”应该包含“element1”。有没有可能用 d3.js 来完成这个？

我很感谢每一个提示:)

Answer 1

这是一个简单的例子，说明可以做什么:https://jsfiddle.net/thatOneGuy/qhL8wztm/1/

首先调整半径。我已经检查了节点是否有子节点:

node.each(function(d) {
  if (d.compartment) {
    node.filter(function(e) {
      if (e.name == d.compartment) {
        e.hasChildren = true;
      }
    })
  }
})

然后调整半径。如果它有 child ，则为 20，否则为 5:

node.attr("r", function(d) {
  if (d.hasChildren) {
    return 20;
  } else {
    return 5;
  }
})

现在调整坐标。因此，如果节点有一个隔间，它会移动到名称与该隔间匹配的节点，并相应地设置 d.x 和 d.y:

 node.attr("cx", function(d) {
      if (d.compartment) {
        node.filter(function(e) {
          return e.name == d.compartment;
        }).each(function(e) {
          d.x = e.x
        })
      }
      return d.x;


    })
    .attr("cy", function(d) {
      if (d.compartment) {
        node.filter(function(e) {
          return e.name == d.compartment;
        }).each(function(e) {
          d.y = e.y
        })
      }
      return d.y;
    });

这并不完美，但它确实有效。显然它需要一点点玩耍，例如，将 child 带到容器节点前面等。但是您可以从这里获得基础知识:)

编辑

我还添加了一个类。如果节点必须在容器中，请将 pointerEvents 设置为 none。这样不会影响拖动:

.attr("class", function(d){
  if(d.compartment){
  return "node noPointers"
  } else {
  return "node"
  }

  })

CSS:

.noPointers{
  pointer-events:none;
}

更新 fiddle :https://jsfiddle.net/thatOneGuy/qhL8wztm/3/