无法在D3中对svg元素进行着色

时间:2016-11-16 13:51:27

标签: javascript css d3.js svg

我制作了一张D3地图,然后让M.博斯托克制作地图 tutorial

它旨在创建.subunit.id类并使用像.subunit.23 { fill: #f44242; }这样的CSS对其进行着色。但是,虽然.subunit处于良好状态,但我无法通过指定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>

1 个答案:

答案 0 :(得分:0)

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

所以,你将拥有&#34; a01&#34;,&#34; a02&#34;,&#34; a03&#34;等...