title: Get svg elements specific to a group using selectAll
body: <p>I have the following code.</p>
  
  <p>On click of a button it adds a circle , on hovering the circle a red square is shown and on <code>mouseout</code> it will be hidden. For one circle it works perfectly. But since i'm using <code>d3.selectAll</code> , when there are multiple circle it shows and hides all red rectangles when hovered on one circle. </p>
  
  <p>Is there a way to select the rectangle associated to circle that is hovered using the <code>d3.select</code> or <code>d3.selectAll</code> ?</p>
  
  <p><em>For demonstrating the problem in the code i've added 3 circles can be properly added</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var width = 560,
      height = 500;
    var i = -1;
    valArray = [100, 200, 300, 400];
    var svg = d3.select('#canvas')
      .append('svg')
      .attr('width', width)
      .attr('height', height);
  
    $("#add").click(function() {
      i++;
  
  
      var g = svg.append('svg:g')
        .attr('x', valArray[i])
        .attr('y', valArray[i]);
  
      var yesDecision = g.append('svg:rect')
        .style('fill', "#D64541")
        .attr("width", "50")
        .attr("height", "50")
        .attr("id", "yesDecision")
        .attr("class", "hoverNode")
        .attr("x", valArray[i])
        .attr("y", valArray[i]);
  
      g.append('svg:text')
        .attr('x', valArray[i])
        .attr('y', valArray[i])
        .attr('class', 'id hoverNode')
        .text(function(d) {
          return "Yes";
        });
  
      g.append('svg:circle')
        .attr('class', 'node')
        .attr('r', 40)
        .attr('cx', valArray[i])
        .attr('cy', valArray[i])
        .style('fill', function(d) {
          return ("#ccc");
        }).on('mouseover', function(d) {
          d3.selectAll(".hoverNode").style("visibility", "visible")
        })
        .on('mouseout', function(d) {
          d3.selectAll(".hoverNode").style("visibility", "hidden")
        })
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hoverNode {
    visibility: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="add"&gt;Add element&lt;/button&gt;
  &lt;div id="canvas"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>