Question

我希望实现这样的目标： enter image description here

具有以下属性：

群组是圆形的，不会重叠
每个节点组的顶部都有一个水平居中标题，至少有一个节点，并且至少有一个链接
每个节点都有一个标签类型：源或目标和一个组
每个节点都可以有多个链接
链接源始终是源节点，目标始终是目标节点

我很难弄清楚如何实现这个，因为我昨天开始使用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"]}
    ]
}

结果：

enter image description here

可悲的是不够接近：S

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

Answer 1

我想我有一个解决方案：

enter image description here

这不是完美的，我必须拖拉节点一会儿，但这只是最小的努力解决方案。我通过名称＆＃34; components＆＃34;来调用节点组，通过名称＆＃34; ports＆＃34;来调用节点。我只使用组件的强制布局节点，并将链接移动到端口的位置。这就是全部。它并不完美，但比冥想如何用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 + ")";
        });
    });

d3强制布局与节点组

1 个答案: