问题描述:

I've been looking at Mike Bostock's d3v4 raster+vector iv example and I would like to make something similar but with labels on the features.

I found documentation saying to use individual paths for the markers instead of one big one, with example code like this

`svg.selectAll("path")`

.data(features)

.enter().append("path")

.attr("d", d3.geoPath());

which I think in his example would look something like

`var projection = d3.geoMercator()`

.scale(1 / tau)

.translate([0, 0]);

var path = d3.geoPath()

.projection(projection);

var vector = svg.selectAll("path");

d3.csv("us-state-capitals.csv", type, function(error, capitals) {

if (error) throw error;

vector

.data(capitals)

.enter()

.append("path")

.attr("d", d3.geoPath().projection(projection));

// Compute the projected initial center.

var center = projection([-98.5, 39.5]);

// Apply a zoom transform equivalent to projection.{scale,translate,center}.

svg

.call(zoom)

.call(zoom.transform, d3.zoomIdentity

.translate(width / 2, height / 2)

.scale(1 << 12)

.translate(-center[0], -center[1]));

});

function zoomed() {

var transform = d3.event.transform;

var tiles = tile

.scale(transform.k)

.translate([transform.x, transform.y])

();

projection

.scale(transform.k / tau)

.translate([transform.x, transform.y]);

This draws the capitals, but doesn't seem to properly apply the projection to them, they all bunch up at the upper left corner of the svg despite appearing to have correct coordinates. Also since it isn't in the `zoomed`

function they aren't going to zoom correctly (I think) but if I put the append in there, they don't display at all.

I haven't gotten to putting labels in yet because I want the capitals to display properly first, I figure adding a `text`

element will be simple once I get the display right.

You are really close. First, change the initial declaration of `vector`

to be a `g`

so we can group all the paths:

```
var vector = svg.append("g");
```

Then add the data and switch vector to be the selection of paths:

```
vector = vector.selectAll("path")
.data(capitals)
.enter()
.append("path");
```

Then the zoom stays the same.

Here's the code running.