Javascript d3：当过滤器不是解决方案时，可以根据强制布局中的节点内容选择性地添加子元素

我试图为这个问题找到一个可能的解决方案：

我有一个类似这样的JSON：

{
    nodes: [
        {
            label: "x"
            inputs: [],
            outputs: ["a"]
        },
        {
            label: "y"
            inputs: ["b"],
            outputs: []
        },
        ...
    ],
    links: [
        {
            source: 0, //x
            sourceIndex: 0, //x.outputs.a
            target: 1, //y
            targetIndex: 0 //y.inputs.b
        },
        ...
    ]
}

    <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>

我想为每个节点构建一个SVG，如下所示：

{
    nodes: [
        {
            label: "x"
            inputs: [],
            outputs: ["a"]
        },
        {
            label: "y"
            inputs: ["b"],
            outputs: []
        },
        ...
    ],
    links: [
        {
            source: 0, //x
            sourceIndex: 0, //x.outputs.a
            target: 1, //y
            targetIndex: 0 //y.inputs.b
        },
        ...
    ]
}

    <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.js接口逐个追加它们。我检查了，但过滤在这里不起作用，因为我们讨论的是迭代集合，而不是检查属性的存在性。有什么建议吗？

您可以为此使用嵌套选择

我假设对于输入，您希望为节点数据中输入数组的每个成员添加一个项，对于输出也是如此

例如，输入：

node.append("g").attr({
    "class": "input",
    transform: "translate(-31,-16)"
})
.selectAll('SOME_THING')
  .data(function(d) { return d.inputs; })
  .enter().append('SOME_THING')

其中“SOME_THING”是您想要附加的元素，尽管从示例输出中不清楚这些元素映射到哪里

我解决了每个问题：

但我将使用杰森利的解决方案，我想这是d3的方式…：-

    var inputs = node.append("g").attr({
        "class": "input",
        transform: "translate(-31,-16)"
    });
    inputs.selectAll("use").data(function (d) {
        return d.inputs;
    }).enter().append("use").attr({
        y: function (d, index) {
            return -8 * index;
        },
        "xlink:href": "#port"
    }).append("title").text(String);