Question

对于这个项目，我在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

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

Answer 1

您是否获得了代码的任何输出，因为您有一些语法错误，例如：

proj vs projection（计算圆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文件，希望它与您的文件相同或足够接近。

用d3.js绘制地图上的点

1 个答案: