How to select all connecting nodes and links to a given node on mouse hover in D3.js?

Question

I am working with a force labelled D3 graph like this one: Force Labelled Layout I need to be able to hover on the circular nodes in a way that on hover, the color of the node being hovered upon, it's connecting links and their target nodes get highlighted (say, change in color). How can I achieve this?

This is the code I'm using to create the graph:

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
        });
    };

I'm currently able to change the color of the target single node on mouse hover using the following code:

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; });

Can someone please guide me?