无法为D3中的svg元素着色

我制作了以下的D3地图让我们制作一幅由M. Bostock制作的地图 tutorial。无法为D3中的svg元素着色

它旨在创建.subunit.id类，并使用像.subunit.23 { fill: #f44242; }这样的CSS对其进行着色。但虽然很好，但我不能通过指定其id来达到每个单位。有任何想法吗？

TopoJSON文件可以在这里找到
https://gist.github.com/Avtan/649bbf5a28fd1f76278c752aca703d18

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html lang="en"> 
<style> 
    .subunit { 
    fill: #4286f4; 
    stroke: #efbfe9;} 
    .subunit.23 { fill: #f44242; } 
</style> 
    <head> 
     <title>D3 Uzbekisztan map</title> 
<meta charset="utf-8"> 

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> --> 

</head> 
<body> 

<script> 

    var width = 960, 
     height = 1160; 

    var projection = d3.geo.albers() 
     .center([-10, 40]) 
     .rotate([-75, 0]) 
     .parallels([38, 44]) 
     .scale(4000) 
     .translate([width/2, height/2]); 


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

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

    d3.json("uzb_topo.json", function (error, uzb) { 
     if (error) return console.error(error); 
     console.log(uzb); 

      svg.selectAll(".subunit") 
      .data(topojson.feature(uzb, uzb.objects.uzb).features) 
      .enter().append("path") 
      .attr("class", function(d) { return "subunit " + d.id; }) 
      .attr("d", path); 

    }); 

</script> 

</body> 
</html>

来源

2016-11-16 user7167698

的ID 不能开始一个数字。现在，你设置了两个不同的类，最后一个以数字开头。

一个简单的解决方法是删除类名中的空格。所以，这样的：

.attr("class", function(d) { return "subunit " + d.id; })

应该是这样的：

.attr("class", function(d) { return "subunit" + d.id; })//no space

并相应地设置你的CSS。

另一种解决方案是在号码前加一个字母，比如：

.attr("class", function(d) { return "subunit " + "a" + d.id; })

所以，你将有类 “A01”， “A02”， “A03” 等...

来源

2016-11-16 13:56:37

无法为D3中的svg元素着色

回答

相关问题