Question

我正在尝试使用CSV文件中的数据在地图上追加元素，目的是实现动态连接悬停，如此示例http：// bl.ocks.org/mbostock/7608400所示。

我一直在尝试使用示例 - http://bl.ocks.org/mbostock/9535021使用相同的csv绘制点，但是我对此非常陌生并且无法理解问题的来源。下面是d3调用，其中显示了地图元素，这也是我添加了要添加的点（圆圈）的地方。

d3.json("js/World.json",function(error,geodata) {
  if (error) return console.log(error);

    features.selectAll("path")
        .data(topojson.feature(geodata,geodata.objects.collection).features) 
        .enter()
        .append("path")
        .attr("d",path)
        .on("mouseover",showTooltip)
        .on("mousemove",moveTooltip)
        .on("mouseout",hideTooltip)
        .on("click",clicked);

    d3.csv("csv/us.csv", function(error, data) {
        features.selectAll("circle")
           .data(data)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("cy", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("r", 30)
           .style("fill", "red");
    });

});

其余代码可在以下网址找到：https://jsfiddle.net/pdavr680/

CSV的内容如下（一小段片段，以免淹没帖子）：
name,description,lat,lon Alabama,Montgomery,32.377716,-86.300568 Alaska,Juneau,58.301598,-134.420212 Arizona,Phoenix,33.448143,-112.096962 Arkansas,Little Rock,34.746613,-92.288986 California,Sacramento,38.576668,-121.493629 Colorado,Denver,39.739227,-104.984856 Connecticut,Hartford,41.764046,-72.682198 Delaware,Dover,39.157307,-75.519722 Hawaii,Honolulu,21.307442,-157.857376 Florida,Tallahassee,30.438118,-84.281296 Georgia,Atlanta,33.749027,-84.388229

这些点被绘制并存在于div中，但它们都被捣碎成一个点x：0，y：0，错误是cx和cy接收到NaN值。
在.attr中传递协调的问题是什么？

PS。如果我对这个问题不够详细，请告诉我，以便我可以在进行投票之前对其进行扩展。

D3.js TopoJSON在地图上绘制来自csv的点和线

0 个答案: