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

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

javascript csv svg d3.js

Javascript 使用d3.js在地图上绘制点,javascript,csv,svg,d3.js,geojson,Javascript,Csv,Svg,D3.js,Geojson,对于这个项目，我有一张d3的印度地图，按省份分开。我试图在地图上添加点，但这对我来说根本不起作用根据csv文件中指定的投诉数量，节点应该变得越来越大，越来越小这是我的密码：可视化.html <!DOCTYPE html> <html lang="en"> <head>  <title>India Map</title> <!--

对于这个项目，我有一张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]);
    }

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

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

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{
背景：#fff；
}
#印度{
填充：#95a5a6；
不透明度：.8；
笔画：白色；
笔画宽度：1.2；
}
var w=600；
var h=600；
变量边界=[[68,38]，[97,8]]；//印度的大致范围
var proj=d3.geo.mercator（）
.比例尺（800）
.翻译（[w/2，h/2]）
.旋转（[（边界[0][0]+边界[1][0]）/-2，
（界限[0][1]+界限[1][1]）/-2]）；//轮换项目，将印度纳入视野。
var path=d3.geo.path（）投影（proj）；
var map=d3.选择（#图表”）.追加（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var india=map.append（“svg:g”）
.attr（“id”、“印度”）；
d3.json（“json/indianstates.json”），函数（json）{
印度。选择全部（“路径”）
.data（json.features）
.enter（）.append（“路径”）
.attr（“d”，路径）；
});
d3.csv（“csv/water.csv”，函数（csv）{
印度。选择全部（“圆圈”）
.数据（csv）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回项目（[d.lon，d.lat]）[0]；
})
.attr（“cy”，函数（d）{
返回项目（[d.lon，d.lat]）[1]；
})
.attr（“r”，函数（d）{
返回Math.sqrt（parseInt（d.d））；
})
.样式（“填充”、“黄色”）
.样式（“不透明度”，0.75）；
});

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

注意：我使用了一个任意的

json/indianstates.json

文件，我在谷歌上搜索了它，希望它与您的文件相同，或者足够接近您的文件。

在您的svg中。selectAll（“圆圈”）。。。json.long和json.lat不应该是d.lon和d.lat吗？另外，不确定为什么要设置translate和cx/cy属性。我想您只需要设置其中一个。@BenLyall我做了您建议的更改（d.lon和d.lat以及删除代码的翻译部分）。但是，plotpoints仍然没有显示。请参见下面的答案。如何获取json/indiastates.json文件。它应该包含什么？

<!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>