title: Different Tooltip for each SVG circle on D3 Map
body: <p>I am making a world map of businesses linked to their performance rating: so each business will be represented by a point, that has a tooltip with the performance (and other info.) I'm using the map example <a href="http://bl.ocks.org/phil-pedruco/6522279" rel="nofollow noreferrer" >here </a></p>
  <h3>The Map Data:</h3>
  <pre><code>pointData = {
      &quot;businessName&quot;: businessName,
      &quot;location&quot;: location,
      &quot;performance&quot;: currperformance
  }
  
  pointsData.push(pointData);
  </code></pre>
  <p>Therefore the pointsData JSON object is of the form
  <code>[{&quot;business&quot;:&quot;b1&quot;,&quot;location&quot;:[long1, lat1]},{&quot;businessName&quot;:&quot;b2&quot;,&quot;location&quot;:[long2, lat2]}...</code>]</p>
  <h3>The Tooltip Problem:</h3>
  <p>I can display the map with points and the same tooltip perfectly until I try to have differing tooltips. Many D3 examples that I've researched with dynamic tooltips are only applicable to charts - and my struggle is to append the JSON data for the tooltip on <strong>each SVG circle</strong> on a map.</p>
  <p>Here is my attempt thus far, which displays <em>no points</em> and shows no console errors (Adding in the <code> .each(function (d, i) {..}</code>doesn't draw the parts anymore but it's necessary for linking each location to it's subsequent business and performance rating.)</p>
  <pre><code>d3.json(&quot;https://raw.githubusercontent.com/d3/d3.github.com/master/world-110m.v1.json&quot;, function (error, topo) {
      if (error) throw error;
  
      gBackground.append(&quot;g&quot;)
          .attr(&quot;id&quot;, &quot;country&quot;)
          .selectAll(&quot;path&quot;)
          .data(topojson.feature(topo, topo.objects.countries).features)
          .enter().append(&quot;path&quot;)
          .attr(&quot;d&quot;, path);
  
  
      gBackground.append(&quot;path&quot;)
          .datum(topojson.mesh(topo, topo.objects.countries, function (a, b) { return a !== b; }))
          .attr(&quot;id&quot;, &quot;country-borders&quot;)
          .attr(&quot;d&quot;, path);
  
  
      //Tooltip Implementation
      var tooltip = d3.select(&quot;body&quot;).append(&quot;div&quot;)
          .attr(&quot;class&quot;, &quot;tooltip&quot;)
          .style('opacity', 0)
          .style('position', 'absolute')
          .style('padding', '0 10px');
  
  
      gPoints.selectAll(&quot;circle&quot;)
          .each(function (d, i) {
              this.data(pointsData.location).enter()
                  .append(&quot;circle&quot;)
                  .attr(&quot;cx&quot;, function (d, i) { return projection(d)[0]; })
                  .attr(&quot;cy&quot;, function (d, i) { return projection(d)[1]; })
                  .attr(&quot;r&quot;, &quot;10px&quot;)
                  .style(&quot;fill&quot;, &quot;yellow&quot;)
                  .on('mouseover', function (d) {
                      tooltip.transition()
                          .style('opacity', .9)
                          .style('background', 'black')
                          .text(&quot;Business&quot; + pointsData.businessName + &quot;performance&quot; + pointsData.performance)
                          .style('left', (d3.event.pageX - 35) + 'px')
                          .style('top', (d3.event.pageY - 30) + 'px')
                  })
                  .on('mouseout', function (d) {
                      tooltip.transition()
                          .style(&quot;visibility&quot;, &quot;hidden&quot;);
                  })
          });
  }); 
  </code></pre>