使用 d3.js 在地图上绘制点答案

【问题标题】：Plotting Points on a Map with d3.js使用 d3.js 在地图上绘制点
【发布时间】：2015-01-13 10:12:56
【问题描述】：

对于这个项目，我有一张 d3 中的印度地图，按省份分隔。我正在尝试在地图上添加点，但它对我不起作用。

节点应该根据 csv 文件中指定的投诉量变得越来越小。

这是我的代码：

visualize.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- India State Map  -->
    <title>India Map</title>

    <!--  Scripts  -->
    <script type="text/javascript" src="d3.min.js"></script>
    <script type="text/javascript" src="d3.geo.min.js"></script>
    <style type="text/css">
    svg {
      background: #fff;
      }

    #india {
      fill: #95a5a6;
      opacity: .8;
      stroke: white ;
      stroke-width: 1.2;
      }
    </style>
  </head>

<body>
  <div id="chart"></div>
  <script type="text/javascript">
    var w = 600;
    var h = 600;
    var proj = d3.geo.mercator();
    var path = d3.geo.path().projection(proj);
    var t = proj.translate(); // the projection's default translation
    var s = proj.scale(); // the projection's default scale

    var map = d3.select("#chart").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
    //        .call(d3.behavior.zoom().on("zoom", redraw))
    .call(initialize);

    var india = map.append("svg:g")
        .attr("id", "india");



    d3.json("json/indianstates.json", function (json) {
        india.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);
    });

 d3.csv("csv/water.csv", function (data) {

        svg.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", function (d) {
            return Math.sqrt(parseInt(d.complaints)*0.0004);
        })
            .style("fill", "yellow")
            .style("opacity", 0.75);

    });
    function initialize() {
        proj.scale(6700);
        proj.translate([-1240, 720]);
    }

这是 CSV 文件。我不会在状态边界中包含 json 文件，因为它工作正常。我不知道问题在于 csv 文件的格式、脚本中调用文件的方式，还是只是脚本中的一些错误。

water.csv

lon,lat,quality,complaints
80.06,20.07,4,17
72.822,18.968,2,62
77.216,28.613,5,49
92.79,87.208,4,3
87.208,21.813,1,12
77.589,12.987,2,54
16.320,75.724,4,7

编辑：修正了一些向我指出的问题。

【问题讨论】：

在你的 svg.selectAll("circle")... json.long 和 json.lat 不应该是 d.lon 和 d.lat 吗？另外，不确定为什么要设置 translate 和 cx/cy 属性。我认为你只需要设置一个或另一个。
@BenLyall 我做了您建议的更改（d.lon 和 d.lat 以及删除代码的翻译部分）。但是，情节点仍然没有出现。
在下面查看我的答案。
如何获取 json/indiastates.json 文件。它应该包含什么？

标签： javascript csv svg d3.js geojson

【解决方案1】：

您的代码是否有任何输出，因为您有几个语法错误，例如：

proj 与投影（在圆 x 和 y 位置的计算中）
svg vs india（尝试创建圈子时变量 svg 不存在）

更正这些语法错误后，您的代码仍然无法按预期运行，在浏览器中看不到任何内容，可能是因为：

需要旋转投影才能看到地图
投影需要与地图和 svg 大小相匹配的比例和平移
由于乘以 0.0004，您绘制的圆圈将非常小

以下是一些可能让您走上正轨的变化：

<!DOCTYPE html>
<html lang="en">
    <head>
    <!-- India State Map  -->
    <title>India Map</title>
    <style type="text/css">
        svg {
            background: #fff;
        }

        #india {
            fill: #95a5a6;
            opacity: .8;
            stroke: white ;
            stroke-width: 1.2;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
    <script type="text/javascript">
        var w = 600;
        var h = 600;
        var bounds = [[68,38], [97, 8]];  // rough extents of India
        var proj = d3.geo.mercator()
                         .scale(800)
                         .translate([w/2,h/2])
                         .rotate([(bounds[0][0] + bounds[1][0]) / -2, 
                                  (bounds[0][1] + bounds[1][1]) / -2]); // rotate the project to bring India into view.

        var path = d3.geo.path().projection(proj);

        var map = d3.select("#chart").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

        var india = map.append("svg:g")
                       .attr("id", "india");

        d3.json("json/indianstates.json", function(json) {
            india.selectAll("path")
                 .data(json.features)
               .enter().append("path")
                 .attr("d", path);
        });

        d3.csv("csv/water.csv", function(csv) {
            india.selectAll("circle")
                 .data(csv)
               .enter()
                 .append("circle")
                 .attr("cx", function (d) {
                     return proj([d.lon, d.lat])[0];
                 })
                 .attr("cy", function (d) {
                     return proj([d.lon, d.lat])[1];
                 })
                 .attr("r", function (d) {
                     return Math.sqrt(parseInt(d.complaints));
                 })
                 .style("fill", "yellow")
                 .style("opacity", 0.75);
        });

    </script>
</body>

您可以看到我根据印度的地理范围旋转投影的位置，设置比例并根据 SVG 的大小和国家/地区的大小转换为适当的值。我还将圆的半径设置为更合适的值。

注意：我使用了一个任意的 json/indianstates.json 文件，我在 Google 上搜索过，希望它与您的文件相同，或者与您的文件足够接近。

【讨论】：