Javascript d3带节点组的部队布局
我想实现这样的目标： 具有以下属性：Javascript d3带节点组的部队布局,javascript,svg,d3.js,force-layout,Javascript,Svg,D3.js,Force Layout,我想实现这样的目标： 具有以下属性： 组是圆角矩形，从不重叠 每个节点组的顶部都有一个水平居中的标题、至少一个节点和至少一个链接 每个节点都有一个标签类型：源或目标和一个组 每个节点都可以有多个链接 链接的源始终是源节点，目标始终是目标节点 我很难想出如何实现这个，因为我昨天开始使用d3.js 目前我有这样的想法： <g class="component worker" transform="translate(0,0)"> <use class=
- 组是圆角矩形，从不重叠
- 每个节点组的顶部都有一个水平居中的标题、至少一个节点和至少一个链接
- 每个节点都有一个标签类型：源或目标和一个组
- 每个节点都可以有多个链接
- 链接的源始终是源节点，目标始终是目标节点
<g class="component worker" transform="translate(0,0)">
<use class="container" xlink:href="#container"/>
<use class="icon" xlink:href="#worker"/>
<text class="label" text-anchor="middle" alignment-baseline="middle" dy="40">Worker</text>
<g class="input" transform="translate(-31,-16)">
<use class="port" xlink:href="#port">
<title>stdin</title>
</use>
<use y="8" class="port" xlink:href="#port"/>
<use y="16" class="port" xlink:href="#port"/>
<use y="24" class="port" xlink:href="#port"/>
<use y="32" class="port" xlink:href="#port"/>
</g>
<g class="output" transform="translate(31,16)">
<use class="port" xlink:href="#port">
<title>stdout</title>
</use>
<use y="-8" class="port" xlink:href="#port"/>
<use y="-16" class="port" xlink:href="#port"/>
<use y="-24" class="port" xlink:href="#port"/>
<use y="-32" class="port" xlink:href="#port"/>
</g>
</g>
不知道如何将节点放入矩形中，以及如何将力布局添加到圆角矩形中，圆角矩形的大小取决于节点数量，且其宽度和高度不相等，因此我不能仅使用中心点来计算力…：有什么想法吗？我想我有一个解决方案： 这不是完美的，我必须拖放节点一段时间，但这只是最省力的解决方案。我将节点组命名为“组件”，将节点命名为“端口”。我只使用组件的强制布局节点，并将链接移动到端口的位置。这就是全部。这并不完美，但比用d3冥想几天来解决这个问题要好得多 每个组件都有一个SVG，如下所示：
<g class="component worker" transform="translate(0,0)">
<use class="container" xlink:href="#container"/>
<use class="icon" xlink:href="#worker"/>
<text class="label" text-anchor="middle" alignment-baseline="middle" dy="40">Worker</text>
<g class="input" transform="translate(-31,-16)">
<use class="port" xlink:href="#port">
<title>stdin</title>
</use>
<use y="8" class="port" xlink:href="#port"/>
<use y="16" class="port" xlink:href="#port"/>
<use y="24" class="port" xlink:href="#port"/>
<use y="32" class="port" xlink:href="#port"/>
</g>
<g class="output" transform="translate(31,16)">
<use class="port" xlink:href="#port">
<title>stdout</title>
</use>
<use y="-8" class="port" xlink:href="#port"/>
<use y="-16" class="port" xlink:href="#port"/>
<use y="-24" class="port" xlink:href="#port"/>
<use y="-32" class="port" xlink:href="#port"/>
</g>
</g>
我想这里需要多个力，一个力将节点拉入组中，另一个力将组推至最小距离。这是一个群集力布局，其中对节点的移动有限制。节点应留在集群容器中，并且只有集群应通过节点的拉力拖动移动。我查看了clustered force布局示例，但没有一个示例具有集群容器，因此如何使用d3.js解决这个问题是一个困难的问题。我想我已经达到了d3部队布局的极限，我必须建立一个针对特定问题的部队布局…：S:S:S
{
"nodes": [
{"label": "Traverser", "group": ["node", "component"]},
{"label": "Standard Output", "group": ["node", "port", "output"]},
{"label": "Subscriber", "group": ["node", "component"]},
{"label": "Standard Input", "group": ["node", "port", "input"]}
],
"links": [
{"source": 0, "target": 1, "group": ["link", "internal"]},
{"source": 3, "target": 2, "group": ["link", "internal"]},
{"source": 1, "target": 3, "group": ["link", "external"]}
]
}
<g class="component worker" transform="translate(0,0)">
<use class="container" xlink:href="#container"/>
<use class="icon" xlink:href="#worker"/>
<text class="label" text-anchor="middle" alignment-baseline="middle" dy="40">Worker</text>
<g class="input" transform="translate(-31,-16)">
<use class="port" xlink:href="#port">
<title>stdin</title>
</use>
<use y="8" class="port" xlink:href="#port"/>
<use y="16" class="port" xlink:href="#port"/>
<use y="24" class="port" xlink:href="#port"/>
<use y="32" class="port" xlink:href="#port"/>
</g>
<g class="output" transform="translate(31,16)">
<use class="port" xlink:href="#port">
<title>stdout</title>
</use>
<use y="-8" class="port" xlink:href="#port"/>
<use y="-16" class="port" xlink:href="#port"/>
<use y="-24" class="port" xlink:href="#port"/>
<use y="-32" class="port" xlink:href="#port"/>
</g>
</g>
{
"nodes": [
{"label": "Traverser", "groups": ["node", "component", "publisher", "traverser"], "inputs": [], "outputs": ["stdout"]},
{"label": "Subscriber", "groups": ["node", "component", "subscriber"], "inputs": ["stdin"], "outputs": []}
],
"links": [
{"source": 0, "sourceIndex": 0, "target": 1, "targetIndex": 0, "groups": ["link"]}
]
}
var force = d3.layout.force()
.gravity(.05)
.distance(150)
.charge(-1000)
.size([width, height])
.nodes(this.data.nodes)
.links(this.data.links)
.start();
var node = svg.selectAll(".node").data(this.data.nodes).enter().append("g").attr({
"class": function (d) {
return d.groups.join(" ");
}
}).call(force.drag);
node.append("use").attr({
"class": "container",
"xlink:href": "#container"
});
node.append("use").attr({
"class": "icon",
"xlink:href": function (d) {
return d.icon;
}
});
node.append("text").attr({
"class": "label",
"text-anchor": "middle",
"alignment-baseline": "middle",
dy: 40
}).text(function (d) {
return d.label
});
node.append("g").attr({
"class": "input",
transform: "translate(-31,-16)"
}).selectAll("use").data(function (d) {
return d.inputs;
}).enter().append("use").attr({
y: function (d, index) {
return 8 * index;
},
"class": "port",
"xlink:href": "#port"
}).append("title").text(String);
node.append("g").attr({
"class": "output",
transform: "translate(31,-16)"
}).selectAll("use").data(function (d) {
return d.outputs;
}).enter().append("use").attr({
y: function (d, index) {
return 8 * index;
},
"class": "port",
"xlink:href": "#port"
}).append("title").text(String);
var link = svg.selectAll(".link").data(this.data.links).enter().append("path").attr({
"class": function (d) {
return d.groups.join(" ");
},
"marker-end": "url(#arrow)"
});
force.on("tick", function () {
link.attr("d", function (d) {
var sx = d.source.x + 31 + 6;
var sy = d.source.y - 16 + d.sourceIndex * 8;
var tx = d.target.x - 31 - 6;
var ty = d.target.y - 16 + d.targetIndex * 8;
return "M" + sx + "," + sy + " " + tx + "," + ty;
});
node.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
});