D3.js在地圖上的圓圈

Question

我對編碼非常陌生，正在嘗試學習D3。 我有可以在瀏覽器中顯示的法國地圖。 但是，我試圖基於csv文件在地圖上顯示圓圈。 我不確定該函數在做什么錯...任何幫助/指導都很好。

這是代碼和文件的Cloud9 ... https://ide.c9.io/santiallende/d3-map-bubbles-france

Answer 1

我不會幫忙，您的代碼很亂。

您定義4個不同的svg元素並將其附加到主體，然后創建3個不同的投影。 所有這些都是不必要的。 只需刪除所有冗余即可。

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

固定代碼在這里 。