gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:12:44 24 4
gpt4 key购买 nike

嗨 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 来完成这个?

我很感谢每一个提示:)

最佳答案

这是一个简单的例子,说明可以做什么: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/

关于javascript - D3.js:将节点放置在其他节点内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37572625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com