Question

我在力导向图中实现了搜索功能。搜索将基于节点ID。当我在输入文本框中输入节点ID时，将发生键入事件。我能够在对象中找到节点，但我不知道如何更改图中搜索节点的背景颜色并增加圆的半径。分配背景颜色以突出显示图形中的节点的目的。我的示例链接是jsfiddle

this.searchNode = function (id) {
        var searchedNode = findNode(id);
        if(searchedNode == null){
            alert("Not Found");
            return false;
        }else {
            alert("Found");
            update(searchedNode);
        }   
    }

有谁能建议我怎么做？

Answer 1

如果没有完整的代码，很难肯定地说，但是类似下面的内容

d3.select(searchedNode).attr('r',newRadius).style('fill', newColor);

Answer 2

由于您是按ID搜索的，因此您可能希望在附加ID时为每个圈子分配ID，然后在搜索过程中利用它。这就是我的意思：

// Append a circle
nodeEnter.append("svg:circle")
    .attr("id",function(d) {return "id_" + d.id}) // assign ID to circle
.attr("r", 8)
    ....

然后在搜索中：

this.searchNode = function (id) {
    var searchedNode = findNode(id);
    if(searchedNode == null){
        //alert("Not Found");
        return false;
    }else {
        //alert("Found");
        d3.selectAll("#id_" + id) // select circle based on ID
            .transition().duration(350)
            .attr("r",20) // temporarily increase the radius, or do something else
            .transition().duration(350)
            .attr("r",8);

        upd(searchedNode);
    }   
}

更新了FIDDLE。

这是一种简单明了的方式......但是有很多方法可以达到你想要的效果。

在力导向图中动态改变节点的背景颜色

2 个答案: