Je travaille avec d3. Je crée un globe de pays à partir d'un fichier json. Le globe a des chemins svg, et chaque chemin a un id. Je souhaite sélectionner un chemin d'accès avec un ID particulier. Comment pourrais-je faire ça, s'il vous plaît?
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
}
Vous pouvez sélectionner un élément par ID en préfixant l'ID avec "#" et en l'utilisant comme sélecteur:
d3.select("#ID");
ou pour sélectionner un chemin d'accès avec cet ID
d3.select("path#ID");