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

Plotting Points on a Map with d3.js

本文关键字：绘制 地图 d3 js 使用      更新时间：2023-09-26

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

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

这是我的代码：

可视化.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文件的格式，脚本中调用文件的方式，或者它是否只是脚本中的一些错误。

水.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

编辑：修复了一些向我指出的事情。

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

  1. PROJ 与投影（在计算圆 x 和 y 位置时）
  2. SVG vs 印度（当您尝试创建圆圈时，变量 SVG 不存在）

更正这些语法错误后，您的代码仍然无法按预期工作，浏览器中没有任何可见内容，可能是因为：

  1. 需要旋转投影才能看到地图
  2. 投影需要与地图和 svg 大小相匹配的比例和平移
    3. 由于乘以
  3. 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文件，希望它与您的文件相同或足够接近。

相关文章：