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

修正代码here。

D3.js圈子在地图上

1 个答案: