Question

我正在尝试让用户单击强制布局中的节点，并将数据集简化为仅包含那些节点及其关联链接。

我已经达到了这个目标; http://jsfiddle.net/hiwilson1/4gemo0xe/1/

从179开始的部分;

d3.select("#filterResults")
    .on("click", function() {

        //feed the indexes of the selected nodes into array
        var nodeArray = []
        d3.selectAll("circle[fill=\"Red\"]")
            .each(function(d, i) {
                    nodeArray.push(d3.select(this).attr("node-index"))              
            })

        //step2: loop through nodes array and return only those nodes that share
        //index with nodeArray into newNodes
        var newNodes = []
        nodes.forEach(function(nde, idx, list) {
            nodeArray.forEach(function(nde2, idx2, list2) {
                if (idx == nde2) {
                     newNodes.push(nde)   
                }
            })
        })

        //step3: loop through links array and return only those links that
        //have source or target as index of nodes in nodeArray
        var newLinks = []
        links.forEach(function(link, lidx, llist) {
            nodeArray.forEach(function(nde, idx, list) {
                if (link.source == nde || link.target == nde) {
                        newLinks.push(link)
                }
            })
        })
        alert(newLinks.length)

    })

是我被困的地方，特别是第3步。我似乎无法从onclick函数中获取链接，警报返回零应返回的地方，但是许多链接与所选节点相关联。

最终我想识别与所选节点相关联的节点和链接，然后更新数据集以反映这个新数据集，如果可能的话！只有一种方法可以找到..

Answer 1

一旦强制启动，源和目标值就会被相应的节点对象替换。因此，不要将链接源与节点索引进行比较，而是将其与节点进行比较。

if (link.source == nodes[nde] || link.target == nodes[nde]) {
    newLinks.push(link)
}

或

if (link.source.index == nde || link.target.index ==nde) { newLinks.push(link) }

更新了JSFiddle

注意：源和目标属性的值最初可能是指定为nodes数组的索引;这些将被替换为呼叫开始后的参考。

这是节点的示例结构。

{ fixed: 0, index: 12, label: "I am an information label", px: 287.64956227452404, py: 83.71383910494417, weight: 7, x: 287.7214898272057, y: 83.59069881862021 }

d3.select(".node").data()会返回与该节点相关联的数据，其中node是类名。

您可以参考here更多关于d3力布局的信息。

d3根据用户选择动态更新节点

1 个答案: