相关疑难解决方法(0)

我按照这个例子创建了一个美国各州的d3地图:

http://bl.ocks.org/mbostock/4699541

并在此SO问题后添加标记:

将标记放到使用topoJSON和d3.js生成的地图上

问题是在缩放时,地图标记保持不变.我相信我需要将它们转化为新的位置,但不确定如何实现这一目标.

var width = 900,
  height = 500,
  active = d3.select(null);

var projection = d3.geo.albersUsa()
  .scale(1000)
  .translate([width / 2, height / 2]);

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

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

svg.append("rect")
  .attr("class", "background")
  .attr("width", width)
  .attr("height", height)
  .on("click", reset);

var g = svg.append("g")
  .style("stroke-width", "1.5px");

d3.json("/files/d3-geo/us.json", function(error, us) {
  if (error) { throw error; }

  g.selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
    .attr("class", function(item) {
      return window.US_STATES[item.id].water_authorities > 0 ? 'avail' : …