title: D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
body: <p>I have some data with 2 attributes: colour and value</p>
  
  <p>I use the D3 enter selection to create circle elements, and append them to the body of the page.  Their fill colour is determined by the "colour" attribute.</p>
  
  <p>Then, I append text elements to the page.  The text contents are determined by the "value" attribute.</p>
  
  <p>Here is what I am working with:</p>
  
  <pre><code>// Set up svg element
  var svg = d3.select("body")
      .append("svg")
      .attr("width", 300)
      .attr("height", 300)
      .style("background", "lightblue");
  
  var dataset = [
      {"colour":"red", "value":"First set of text"},
      {"colour":"green", "value":"Second attempt"},
      {"colour":"blue", "value":"Third and final!"}
  ];
  
  // Create circles from the data
  // On mouseover, give them a border (remove on mouseout)
  svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("r", 40)
      .attr("cy", function(d, i) { return i*80 + 40; })
      .attr("cx", 50)
      .style("fill", function(d) {return d.colour;})
  
    // HERE
    // Can I somehow show and hide the text component that is
    // associated with this circle when the circle is hovered, rather
    // than the text itself?
    .on("mouseover", function(d) {
            d3.select(this).style("stroke", "black")
                           .style("stroke-width", 2)
    })
    .on("mouseout", function(d) {d3.select(this).style("stroke", "none")});
  
  // Now add the text for each circle
  // Same thing with mouseover and mouseout
  svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .attr("text-anchor", "middle")
      .attr("y", function(d, i) { return i*80 + 40; })
      .attr("x", 50)
      .style("opacity", 0)
      .on("mouseover", function(d) {d3.select(this).style("opacity", 1)})
      .on("mouseout", function(d) {d3.select(this).style("opacity", 0)})
      .text(function(d) { return d.value;});
  </code></pre>
  
  <p>I would like for the text to be hidden, until the associated circle is hovered over.  How can I connect the text element with a particular circle, so that I can toggle whether the text is shown by hovering over the circle?</p>
  
  <p>This fiddle below is an outline of what I am trying to do, and what I have got so far.  I have the text showing up only when hovered, but not when the circle is hovered.</p>
  
  <p><a href="https://jsfiddle.net/aj4zpn6z/" rel="nofollow noreferrer">https://jsfiddle.net/aj4zpn6z/</a></p>