Círculos no mapa exibiram local incorreto no D3 V4

Question

Jul 12, 2017, 11:08 PM

javascript geo d3.js svg map-projections

Círculos no mapa exibiram local incorreto no D3 V4

Estou usando um tutorial para aprender a gerar mapas no D3.v3, mas estou usando o D3.v4. Estou apenas tentando fazer com que alguns círculos apareçam no mapa (veja abaixo). O código funciona, exceto que os círculos estão sobre Nevada e devem estar na área da baía. Imagino que seja uma incompatibilidade entre as projeções do mapa e as coordenadas projetadas. Não sei em que projeção o mapa está, mas tentei forçá-lo a albersUsa (consulte os comandos comentados onde gero o caminho), mas isso faz com que o mapa inteiro desapareça. Qualquer ajuda seria apreciada!

<!DOCTYPE html>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var w = 960,
    h = 600;
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
             //.projection(projection)

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

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

  svg.selectAll("path")
     .data(topojson.feature(us, us.objects.states).features)
     .enter().append("path")
	 .attr("class", "states")
     .attr("d", path);

   svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states)))

   svg.append("path")
      .attr("class", "county-borders")
      .attr("d", path(topojson.mesh(us, us.objects.counties)));

      aa = [-122.490402, 37.786453];
  	  bb = [-122.389809, 37.72728];

   svg.selectAll("circle")
      .data([aa,bb]).enter()
      .append("circle")
      .attr(",cx", function (d) { return projection(d)[0]; })
      .attr("cy", function (d) { return projection(d)[1]; })
      .attr("r", "8px")
      .attr("fill", "red")
    });

</script>