user7167698 user7167698 - 2 months ago 10
CSS Question

Cannot color svg elements in D3

I made a D3 map following Let's make a map tutorial by M. Bostock.

It is intended to create
class and color it using CSS like
.subunit.23 { fill: #f44242; }
. But while
is adressed well I can not reach each unit by specifying its
. Any ideas?

TopoJSON file is available here

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

<script src=""></script>
<script src=""></script> -->



var width = 960,
height = 1160;

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

var path = d3.geo.path()

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

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

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





IDs cannot start by a number. Right now, you're setting two different classes, and the last one start with a number.

A simple solution is removing the space in your class name. So, this:

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

Should be this:

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

And set your CSS accordingly.

Another solution is adding a letter before the number, like this:

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

So, you'll have the classes "a01", "a02", "a03" etc...