在 d3.js 中的 svg 地图上标记位置答案

【问题标题】：Mark a location on an svg map in d3.js在 d3.js 中的 svg 地图上标记位置
【发布时间】：2012-12-13 21:57:21
【问题描述】：

我正在使用 d3.js wiki 中的这个示例。

http://bl.ocks.org/2206590

据此，我有一张地图，我想知道如何在上面标记一个位置。

如何在此地图上以[40.717079,-74.009628] 的坐标位置绘制一个小圆圈。

以下是示例的源代码：

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

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

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 0]);

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

d3.json("readme.json", function(json) {
  g.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path);
});

【问题讨论】：

标签： svg maps d3.js geojson

【解决方案1】：

好吧，这可能不是正确的答案，但这就是我所做的：

var width = 1060,
    height = 600,
    centered;


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

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

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .append("g")
    .attr("id", "states");

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 100]);

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

    setInterval(function(){
        draw();
    },1000);

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", click);

    var latitude = 35 + Math.floor(Math.random()*8);
    var longitude =  -1 * (83 + Math.floor(Math.random()*35));
    var coordinates = projection([longitude, latitude]);
    g.append('svg:circle')
    .attr('cx', coordinates[0])
    .attr('cy', coordinates[1])
    .attr('r', 2)
    .attr('stroke','red')
    .attr('fill','red');      
  });
}

代码有效，但我怀疑我在每次渲染新坐标时都重新绘制整个地图做错了。

【讨论】：