Javascript D3.js：将节点放置在其他节点中

大家好，我的社区

我正在寻找一种解决方案，用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},
    ]
}

节点“隔间1”应包含“element1”。是否有可能通过d3.js实现这一点

---

我很感谢每一个提示：）

下面是一个可以做的快速示例：

首先调整半径。我已签入以查看节点是否有子节点：

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

然后调整半径。如果它有孩子，则将其设置为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;
    });

这并不完美，但很管用。显然，它需要一些技巧，例如，将子节点带到容器节点前面等。但是您可以从中获得基本知识：）

编辑

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

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

  })

CSS:

---

更新的小提琴：

这是一个很好的起点。我的改进意见：1。也许可以禁用节点与其隔室2之间的力。仅当节点不在隔间内时才更改节点坐标，因此：c.y-radius.noPointers{ pointer-events:none; }