Question

我正在使用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);
});

Answer 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');      
  });
}

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

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

1 个答案: