当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - d3 raster+vector with labels on features

问题描述:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: