on hover increase node radius
<p><a href="http://plnkr.co/edit/GaoBUfQv3uvTjNrsIPZ3?p=preview" rel="nofollow"> Link to my code (Plunker)</a></p>

<p>I am developing a network diagram in D3.js force layout I am stuck with a mouse over functionality. When I hover a node, I want the links and children (one hop) associated with it to expand in size. Right now, my code increases the size of the hovered node and links associated with it but not the nodes associated with it.</p>

<p>This is what I have tried so far,</p>

<p>On mouse over the hovered node will expand -</p>

<pre><code>function mouseover(d) {
    link.style('stroke-width', function(l) {
    if (d === l.source || d === l.target)
        return 4;
    });

    d3.select(this).select("circle").transition()
    .duration(300)
    .attr("r", 12);
}
</code></pre>

<p>On mouse out the hovered node will go back to same size as it was before - </p>

<pre><code>function mouseout() {
    link.style('stroke-width', 1.5);
    d3.select(this).select("circle")
    .transition()
    .duration(750)
    .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });
}
</code></pre>

<p>Thanks in advance.</p>