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

看起来非常直接，但无论我尝试什么，我总会得到同样的错误：

未捕获的SyntaxError：无法执行＆＃39; querySelector＆＃39;在＆＃39;文件＆＃39;：＆＃39;路径＃643＆＃39;不是有效的选择器。

我尝试了很多东西（我想到的所有组合），我在这里发现了很多类似的问题，但未能找到合适的解决方案。实际上存在具有该ID的路径。所有国家都存储在世界变量中，对我来说似乎没问题。

这是我的完整代码：

    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有效性

的示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: