title: How to select a d3 svg path with a particular ID
body: <p>I'm working with d3. I create a globe of countries from a json file. The globe has svg paths, and each path has an id. I want to select a path with a particular ID. How would I do that, please?</p>
  
  <pre><code>handleGlobe();
  
  $('#panel div').click(function(){
  
  if (this.className == 'represented') {
  thisID = $(this).attr('id');
  focusedCountry = d3.select('path') //??? not sure how to say this
  p = d3.geo.centroid(focusedCountry);
  }
  
  ...
  
  handleGlobe() {
  var feature;
  
          var projection = d3.geo.azimuthal()
              .scale(380)
              .origin([-71.03,42.37])
              .mode("orthographic")
              .translate([380, 400]);
  
          var circle = d3.geo.greatCircle()
              .origin(projection.origin());
  
          // TODO fix d3.geo.azimuthal to be consistent with scale
          var scale = {
            orthographic: 380,
            stereographic: 380,
            gnomonic: 380,
            equidistant: 380 / Math.PI * 2,
            equalarea: 380 / Math.SQRT2
          };
  
          var path = d3.geo.path()
              .projection(projection);
  
          var svg = d3.select("#globe").append("svg:svg")
              .attr("width", 800)
              .attr("height", 800)
              .on("mousedown", mousedown);
  
  
  
          d3.json("world-countries.json", function(collection) {
  
           feature = svg.selectAll("path")
                .data(collection.features)
                .enter().append("svg:path")
                .attr("d", clip)
                .attr("id", function(d) { return d.id; })
                .on("mouseover", pathOver)
                .on("mouseout", pathOut)
                .on("click", click);
  
            feature.append("svg:title")
                .text(function(d) { return d.properties.name; });
  
            feature.each(function(){
  
               for (var i=0; i&lt;unrepresented.length; i++){
                  if ($(this).attr('id') == unrepresented[i]) {
                      d3.select(this).style("fill", "#ededed");
                  } 
  
               }
               if (($(this).attr('id') == 'GRL') || ($(this).attr('id') == 'ATA')) { //Greenland and Antarctica are shapes, but not countries
                  d3.select(this).style("fill", "#ededed");
               }
            });
  
  
          });
  
          d3.select(window)
              .on("mousemove", mousemove)
              .on("mouseup", mouseup)
              ;
  
          d3.select("select").on("change", function() {
            projection.mode(this.value).scale(scale[this.value]);
            refresh(750);
          });
  
          var m0,
              o0;
  
          function mousedown() {
            m0 = [d3.event.pageX, d3.event.pageY];
            o0 = projection.origin();
            d3.event.preventDefault();
          }
  
          function mousemove() {
            if (m0) {
              var m1 = [d3.event.pageX, d3.event.pageY],
                  o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
              projection.origin(o1);
              circle.origin(o1)
              refresh();
            }
          }
  
          function mouseup() {
            if (m0) {
              mousemove();
              m0 = null;
            }
          }
  
          function refresh(duration) {
            (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
          }
  
          function clip(d) {
            return path(circle.clip(d));
          }
  
          function click() {
  
          }
  
          function pathOver() {
  
          }
  
          function pathOut() {
  
          }
      //end globe
  
  }
  </code></pre>