问地图上的D3.js圆

EN

//Width and height
var w = 800;
var h = 350;

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

 d3.json("france.json", function(data) {

  var group = canvas.selectAll("g")
    .data(data.features)
    .enter()
    .append("g")

  //Define map projection
  var projection = d3.geo.mercator()
    .translate([400, 1200])
    .scale([1100]);

  //Define path generator
  var path = d3.geo.path()
    .projection(projection);

  var areas = group.append("path")
    .attr("d", path)
    .attr("class", "area")
    .attr("fill", "steelblue");

  //Load in cities data
  d3.csv("wineregions.csv", function(data) {

    canvas.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
      })
      .attr("r", 5)
      .style("fill", "yellow")
      .style("opacity", 0.75);
  });
});