0

私はd3.jswikiのこの例を使用しています。

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);
});
4

1 に答える 1

0

OK、これは正しい答えではないかもしれませんが、これが私がしたことです:

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

コードは機能しますが、新しい座標をレンダリングするたびにマップ全体を再描画するという間違ったことをしているのではないかと思います。

于 2012-12-14T07:54:42.320 に答える