javascript - d3 带有节点组的强制布局

Question

我想要实现这样的目标:

具有以下属性:

• 组是圆 Angular 矩形，从不重叠
• 每个节点组的顶部都有一个水平居中的标题、至少一个节点和至少一个链接
• 每个节点都有一个类型标签:源或目标和一个组
• 每个节点可以有多个链接
• 链接的源始终是源节点，目标始终是目标节点

自从我昨天开始使用 d3.js 以来，我很难弄清楚如何实现这一点......

目前我有这样的东西:

js:

var GraphView = Class.extend({
    init: function (data) {
        this.data = data;
    },
    render: function () {
        var width = 960;
        var height = 500;
        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        var force = d3.layout.force()
                .gravity(.05)
                .distance(100)
                .charge(-500)
                .size([width, height])
                .nodes(this.data.nodes)
                .links(this.data.links)
                .start();

        var link = svg.selectAll(".link")
                .data(this.data.links)
                .enter().append("line")
                .attr("class", function (d) {
                    return d.group.join(" ");
                });

        var node = svg.selectAll(".node")
                .data(this.data.nodes)
                .enter().append("g")
                .attr("class", function (d) {
                    return d.group.join(" ");
                })
                .call(force.drag);

        var component = node.filter(function (d) {
            return d.group[1] == "component";
        });

        var port = node.filter(function (d) {
            return d.group[1] == "port";
        });

        var input = port.filter(function (d) {
            return d.group[2] == "input";
        });

        var output = port.filter(function (d) {
            return d.group[2] == "output";
        });

        component.append("rect")
                .attr("x", -8)
                .attr("y", -8)
                .attr("width", 103)
                .attr("height", 64)
                .attr("rx", 15)
                .attr("ry", 15);

        port.append("circle")
                .attr("r", 6);

        component.append("text")
                .attr("dx", 24)
                .attr("dy", "1em")
                .text(function (d) {
                    return d.label
                });
        port.append("text")
                .attr("dx", 12)
                .attr("dy", ".35em")
                .text(function (d) {
                    return d.label
                });

        force.on("tick", function () {
            link
                    .attr("x1", function (d) {
                        return d.source.x;
                    })
                    .attr("y1", function (d) {
                        return d.source.y;
                    })
                    .attr("x2", function (d) {
                        return d.target.x;
                    })
                    .attr("y2", function (d) {
                        return d.target.y;
                    });

            node.attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        });
    }
});

CSS:

.link.internal {
    stroke: #ccc;
    stroke-width: 1px;
}

.link.external {
    stroke: #000;
    stroke-width: 2px;
}

.link.external.error {
    stroke: #f00;
}

.node text {
    pointer-events: none;
    font: 10px sans-serif;
}

.node.component rect {
    fill: #ff0;
    stroke: #000;
    stroke-width: 2px;
}

.node.component text {
    font-weight: bold;
}

.node.port circle {
    stroke: #ccc;
    stroke-width: 2px;
}

.node.port.input circle {
    fill: #000;
}

.node.port.output circle {
    fill: #fff;
}

json:

{
    "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"]}
    ]
}

结果:

遗憾的是还不够接近:S

不知道如何将节点放入矩形中，以及如何向圆 Angular 矩形添加强制布局，其大小取决于节点数，并且其宽度和高度不相等，因此我不能简单地使用中心点来计算力量...:S 有什么想法吗？

Answer 1

我想我有一个解决方案:

这并不完美，我必须拖放节点一段时间，但这只是最省力的解决方案。我将节点组称为“组件”，将节点称为“端口”。我仅使用组件的强制布局节点，并将链接移动到端口的位置。就这样。它并不完美，但比花几天时间思考如何使用 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>

Ofc。没有具有 5 个输入和 5 个输出的节点，但这只是一个模板...所以我通过在鼠标悬停后阅读工具提示来获取端口名称。一次显示每个端口名称会产生不必要的噪音...

JSON 也发生了变化:

{
    "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"]}
    ]
}

js 是这样的(没有 defs 部分):

    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 + ")";
        });
    });