使用d3.js绘制地图上的点 [英] Plotting Points on a Map with d3.js
问题描述
对于这个项目，我有一个d3的印度地图，按省份分。我试图在地图上添加点，但它只是不为我工作。
节点应该变得越来越大，基于
这是我的代码：
visualize.html
<！DOCTYPE html>
< html lang =en>
< head>
<！ - 印度国家地图 - >
< title>印度地图< / title>
<！ - Scripts - >
< script type =text / javascriptsrc =d3.min.js>< / script>
< script type =text / javascriptsrc =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（）; //投影的默认翻译
var s = proj.scale（）; //投影的默认缩放
var map = d3.select（＃chart）。append（svg：svg）
.attr（width，w）
.attr（height，h）
// .call（d3.behavior.zoom（）。on（zoom，redraw））
。
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
.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
：修正了一些指向我的东西。
一些语法错误，例如：
- proj与投影（在计算圆形x和y位置）
- svg与印度（尝试创建圈子时，变量svg不存在）
纠正这些语法错误，您的代码仍然无法正常工作，在浏览器中看不到，可能是因为：
- 您绘制的圈子需要旋转才能将地图显示在视图中
- 投影需要符合地图和svg大小的缩放和翻译
这里有一些变化可能会让你到正确的轨道：
<！DOCTYPE html>
< html lang =en>
< head>
<！ - 印度国家地图 - >
< title>印度地图< / 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 / javascriptsrc =// cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js\"> ;</script>
< script type =text / javascript>
var w =
var h = 600;
var bounds = [[68,38]，[97，8]]; //印度的粗糙程度
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] ）; //旋转项目以使印度进入视野。
var path = d3.geo.path（）。projection（proj）;
var map = d3.select（＃chart）。append（svg：svg）
.attr（width，w）
.attr高度，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 ，yellow）
.style（opacity，0.75）;
}）;
< / script>
< / body>
ve根据印度的地理范围旋转投影，设置比例并根据SVG的大小和国家的大小转换为适当的值。
注意：我使用了一个任意的
json / indianstates.json文件，希望它与您的文件相同或足够接近。For this project, I have a map of India in d3, with seperation by province. I'm trying to add points onto the map, but it just isn't working for me.
The nodes are supposed to become bigger and smaller based on the amount of complaints that is specified in the csv file.
Here is my code:
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]); }Here is the CSV file. I will not include the json file with the state boundaries because it is working fine. I have no clue whether the problem lies within the formatting of the csv file, the way the file is called in the script, or if it is just some error in the script.
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,7EDIT: Fixed some of the things pointed out to me.
解决方案Did you get any output with your code, as you've got a couple of syntax errors, such as:
- proj vs projection (in the calculation of the circle x and y positions)
- svg vs india (the variable svg doesn't exist when you try to create the circles)
After correcting those syntax errors, your code still doesn't work as expected, with nothing visible in the browser, probably because of:
- The projection needs to be rotated to bring the map into view
- The projection needs a scale and translate that matches the map and svg size
- The circles you draw are going to be really small due to the multiplication by 0.0004
Here are some changes that may get you onto the right track:
<!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>You can see where I've rotated the projection based upon the geographical extents of India, set the scale and translate to appropriate values based on the size of the SVG and the size of the country. I've also set the radius of the circles to more appropriate values.
Note: I used an arbitrary
json/indianstates.jsonfile that I googled for, hopefully it's the same as, or close enough to your file.这篇关于使用d3.js绘制地图上的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
