如何在鼠标悬停在D3.js中选择所有连接节点和指向给定节点的链接？

Question

我正在使用标记为D3图形的力，就像这样：Force Labelled Layout我需要能够悬停在圆形节点上，悬停时，节点的颜色悬停在它上面，它正在连接链接及其目标节点突出显示（例如，更改颜色）。我怎样才能做到这一点？

这是我用来创建图表的代码：

for(var i = 0; i < JsonList.length; i++) 
    {
        var nodeExists = 0;

        // check to see if a node for the current url has already been created. If yes, do not create a new node
        for(var j = 0; j < nodes.length; j++)  
        {
            if(JsonList[i].url == nodes[j].label)
                nodeExists = 1; 
        }

        if (nodeExists == 0)
        {
            //var urlLabel = JsonList[i].url;

            var node = {
                label : JsonList[i].url,
                category : JsonList[i].category
            };

            nodes.push(node);

            labelAnchors.push({
                node : node
            });         
            labelAnchors.push({
                node : node
            });
        }

    };

    // create links for connecting nodes
    for(var i = 0; i < JsonList.length; i++) 
    {
        var srcIndx = 0, tgtIndx = 0;
        for(var j = 0; j < nodes.length; j++)
        {
            if( JsonList[i].url == nodes[j].label ) // find the node number for the current url
            {
                srcIndx = j;
            }

            if( JsonList[i].parentURL == nodes[j].label ) // find the node number for the parent url
            {
                tgtIndx = j;
            }
        }

        // connecting the current url's node to the parent url's node
        links.push({
            source : srcIndx,
            target : tgtIndx,
            weight : 1,
        });

        labelAnchorLinks.push({
            source : srcIndx * 2,
            target : srcIndx * 2 + 1,
            weight : 1
        });
    };

我现在可以使用以下代码在鼠标悬停时更改目标单个节点的颜色：

var node = vis.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .style("font-size", 12)
        .call(force.drag);

    node.append("circle")
        .attr("r", 10)
        .style("fill", function(d) { return color[d.category]; })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);

 function mouseover(d) {
d3.select(this)
            .style("fill", "green"); }

function mouseout(d) {
        d3.select(this)
            .transition()
            .duration(250)
            .style("fill", function(d) { return color[d.category]; })
    }

    node.append("text")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.label; });

有人可以指导我吗？