使用给定的ID访问特定的路径元素

Question

I am using Topojson and world-110m.json to visualize a map of the world. I am trying to change the fill property of two particular countries by click event.

The first country is selected by click from the user side and the ID of that path is retrieved using:

var current_country = d3.select(this).style("fill", "red");
var current_country_ID = d3.select(this).attr('id');

The second country to be changed is given (does not really matter) and defined by ID. I have tried using this:

var top = d3.select("path#643").style("fill", "green");

As suggested here: How to select a d3 svg path with a particular ID

Seems pretty straight forward but I always get the same error no matter what I try:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'path#643' is not a valid selector.

I have tried many things (all combinations that come to my mind) and I have seen a lot of similar questions posted here but have failed to find the proper solution. A path with that ID does in fact exist. And all of the countries are stored in the world variable and they seem OK to me.

Here is my full code:

    var width = 2000;
    var height = 2000;

    var svg = d3.select("body").append("svg")
              .attr("width", width) 
              .attr("height", height);

    var projection = d3.geo.mercator()
              .center([50,70]) 
              .scale(150) 
              .rotate([0,0,0]); 

    var path = d3.geo.path().projection(projection); 

    var g = svg.append("g"); 

    var country_selector = d3.select("body").append("div").attr("class", "country_selector"); 

    queue() 
      .defer(d3.json, "world-110m.json")
      .defer(d3.csv, "country_data2.csv")
      .await(main);

    function main(error, world, countryData){

        var country_names = {}; 
        var countries = topojson.feature(world, world.objects.countries).features;

        countryData.forEach(function(d) {
        country_names[d.id] = d.name; 
        });

        var world =  g.selectAll("path") 
                    .data(countries)
                    .enter()
                    .append("svg:path")
                    .attr("d", path)
                    .attr("id", function(d) { return d.id; })
                    .attr("class", function(d) { return d.id; })
                    .on("mouseover", function(d) {
                    country_selector.text(country_names[d.id])
                    .style("left", (d3.event.pageX + 7) + "px")
                    .style("top", (d3.event.pageY - 15) + "px")
                    .style("display", "block")
                    .style("opacity", 0.8);
                    })
                    .on("mouseout", function(d) {
                    country_selector.style("opacity", 0)
                    .style("display", "none");
                    })
                    .on("mousemove", function(d) {
                    country_selector.style("left", (d3.event.pageX + 7) + "px")
                    .style("top", (d3.event.pageY - 15) + "px");
                    })
                    .on("click", function(d) { // the rouble part
                    var current_country = d3.select(this).style("fill", "red")
                    var current_country_ID = d3.select(this).attr('id')
                    console.log(current_country)
                    console.log(current_country_ID)
                    console.log(world)
                    var top = d3.select("path#643").style("fill", "green"); // the bad guy
                    console.log(top)
                    })  
    }; // end of main function

    var zooming = d3.behavior.zoom() 
                .on("zoom",function() {  
                    g.attr("transform","translate("+ 
                        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
                    g.selectAll("path")  
                        .attr("d", path.projection(projection)); 
                });

    svg.call(zooming).on("dblclick.zoom", null);

Any help would be greatly appreciated.

Answer 1

id s can't start with numbers. So the id itself is invalid. You can change the id in the HTML to something like _643 , then in your JavaScript do

var top = d3.select("path#_643").style("fill", "green");

Here's an example using CSS to show id validity

 #643 { background-color: orange; color: #FFF; } #_643 { background-color: orange; color: #FFF; } #-643 { background-color: orange; color: #FFF; } #six43 { background-color: orange; color: #FFF; } 

 <ul> <li id="643">643</li> <li id="_643">_643</li> <li id="-643">-643</li> <li id="six43">six43</li> </ul>