如何选择与特定ID

Question

我与D3工作一D3 SVG路径。我从json文件创建了一个国家的地球。全球有svg路径，每个路径都有一个id。我想选择一个具有特定ID的路径。我该怎么做，请？

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

可以通过以 “＃” 作为前缀的ID，并将它作为一个选择器选择由ID的元素：

d3.select("#ID"); 

或选择与该ID

d3.select("path#ID");