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

Question

我正在使用 Topojson 和 world-110m.json 来可视化世界地图。我试图通过点击事件更改两个特定国家/地区的填充属性。

第一个国家是通过用户端的点击选择的，该路径的 ID 是使用以下方法检索的:

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

要更改的第二个国家/地区已给出(并不重要)并由 ID 定义。我试过使用这个:

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

如此处所建议:How to select a d3 svg path with a particular ID

看起来很简单，但无论我尝试什么，我总是得到同样的错误:

未捕获的语法错误:无法在“文档”上执行“querySelector”:“path#643”不是有效的选择器。

我已经尝试了很多事情(我想到的所有组合)并且我已经看到这里发布了很多类似的问题但未能找到合适的解决方案。实际上确实存在具有该 ID 的路径。所有国家/地区都存储在 world 变量中，它们对我来说似乎没问题。

这是我的完整代码:

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

如有任何帮助，我们将不胜感激。

Answer 1

id 不能以数字开头。所以 id 本身是无效的。您可以将 HTML 中的 id 更改为类似 _643 的内容，然后在您的 JavaScript 中执行

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

这是一个使用 CSS 显示 id 有效性的例子

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