D3 无索引邻域力图（包括自身）

Question

我的 D3 力模型基于 this example: H is for Highlights. 我的 JSON 数据格式不同，因为它使用 id 作为 target/source 而不是作为节点给出的默认索引属性。

我的样本 JSON：

{
"nodes": [
    {"fixed":true,"data": {"id": "foo","idType":"USERNAME","visible":true },"grabbable": true,"grabbed":false},
    {"fixed":true,"data": {"id": "bar","idType":"USERNAME","visible":true },"grabbable": true}
],
"links": [
    {classes":null,"data":{"color":"blue"","source":"foo","target":"bar","visible":true},"grabbable":false},
    {classes":null,"data":{"color":"blue"","source":"bar","target":"foo","visible":true},"grabbable":false}
]
}

如您所见，我在数据中同时包含 target/source，并且它使用 id 作为类型。现在我无法让亮点发挥作用。我把它放在它突出显示其相邻节点和链接的地方，但由于某种原因它不会使节点本身突出显示。我在下面添加了我认为需要修改的箭头，但我完全不确定问题是什么。

    // sets the source and target to use id instead of index
    var edges = [];
    root.links.forEach(function(e) {
        var sourceNode = root.nodes.filter(function(n) {
                    return n.data.id === e.data.source;
                })[0],
                targetNode = root.nodes.filter(function(n) {
                    return n.data.id === e.data.target;
                })[0];

        edges.push({
            source: sourceNode,
            target: targetNode
        });
    });


    // Create an array logging what is connected to what
    var linkedByIndex = { };


    // array algorithm for what is connected to what
    for (var i = 0; i < root.nodes.length; i++) {
        linkedByIndex[i + "," + i] = 1;
    };
    root.links.forEach(function (d) {
        linkedByIndex[d.data.source + "," + d.data.target] = 1;
    });


    // This function looks up whether a pair are neighbors
    function neighboring(a, b) {
        return linkedByIndex[a.data.id + "," + b.data.id]; <<<<<<<<<<<<<
    }


    function connectedNodes() {
        //Reduce the opacity of all but the neighboring nodes
        d = d3.select(this).node().__data__;
        node.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });

        link.style("opacity", function (o) {
            return d.index==o.source.index| d.index==o.target.index ? 1 : 0.1;
        });
    }

我已经试过了，但我不确定我的算法有什么问题。

Answer 1

想通了。添加以下修改所选节点的行到连接节点函数的末尾

已添加代码

return d3.select(this).style("opacity",1);

所以现在看起来...

function connectedNodes() {

        // Reduce the opacity of all but the neighbouring nodes
        // Ternary operator. condition | condition ? value if true : value if false
        // the | means or
        d = d3.select(this).node().__data__;
        node.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;

        });

        link.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });

        // Maintains opacity of selected node.
        return d3.select(this).style("opacity",1);
}

D3 无索引邻域力图（包括自身）

D3 Force Graph Neighboring Without Index (Including Self)

javascript

nodes

d3.js

force-layout