How to select a d3 svg path with a particular ID

Question

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?

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<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

}

Answer 1

You can select an element by ID by prefixing the ID with "#" and using that as a selector:

d3.select("#ID");

or to select a path with that ID

d3.select("path#ID");