Question

我正在尝试根据csv文件中的数据在地图上绘制圆圈。我想要csv文件中的纬度和经度并绘制一个圆圈。我无法将这两个领域延长。我得到一个对象未定义的错误。到目前为止，这是我的代码：这是CSV文件的链接 -
http://slate-interactives-prod.elasticbeanstalk.com/gun-deaths/getCSV.php

 <html>
                <head>
         <meta    charset="utf-8">
        <link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
        <script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
        <script src="d3-geomap/js/d3.geomap.min.js"></script>
    </head>
    <style>
    path.unit:hover{
    fill:#99d8c9;
}
</style>
    <body>
        <div id="map"></div>
    </body>
    </html>

   <script>
    var map = d3.geomap.choropleth()
    .geofile('d3-geomap/topojson/countries/USA.json')
    .projection(d3.geo.albersUsa)
    .column('2012')
    .unitId('fips')
    .scale(1000)
    .legend(true);

    var width = 950,
    height = 550;

// set projection
var projection = d3.geo.albersUsa();

// create path variable
var path = d3.geo.path()
    .projection(projection);
    var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height);

    d3.csv("data.csv", function(data) {
    var coordinates = projection([data.lat,data.lng]);
    svg.append("circle")
            .attr("cx", coordinates[0])
            .attr("cy", coordinates[1])
            .attr("r", 5)
            .style("fill", "red");
    });

    d3.select('#map')
        .call(map.draw, map);

    </script>

Answer 1

您的代码中至少存在一些问题。首先data检索的d3.csv对象是一个数组。它是具有.lat和.lng等属性的数组元素。因此未定义data.lat和data.lng。

我猜你要为数组中的每个元素创建圆圈。你可以通过迭代数组来做到这一点，例如

data.forEach(function(d) {
    var coordinates = projection([d.lat, d.lng]);
    // ...
});

这不是正常的D3习惯用法（它没有使用选择和.enter()），但它会起作用。

其次，CSV文件始终作为文本字符串读取，即使值实际为数字也是如此。你想要从字符串转换为数字，所以上面的代码应该是

    var coordinates = projection([parseFloat(d.lat), parseFloat(d.lng)]);

正如我所说，您的代码可能存在其他问题，但修复这两个问题至少应该让您更进一步。

d3 - 从csv文件加载两个特定列

1 个答案: