Javascript 谷歌地图上的D3覆盖未完全渲染
作为背景，我一直在做一个小项目，在谷歌地图上的d3覆盖图中突出显示当地社区和犯罪事件，但发现我的覆盖图只显示了部分内容 最初的目标是实现某种视觉效果，比如渲染的地图 此目标/示例映射的代码可以在中看到。我用这个例子来指导我目前的工作 不幸的是，当我用谷歌地图为我的目标视图运行覆盖代码时，我发现只有一小部分的总体d3路径实际呈现在谷歌地图上。通过控制台中的调试，我可以看到所有相关的geojson数据正在加载，每个路径数组都包含在一个路径节点中，但地图上只显示了一个或两个路径-例如，我只看到一个或两个邻域上的透明填充（如下图所示） 有谁能告诉我为什么没有完全显示带有geojson数据的d3覆盖，以及我如何解决这个问题，以便看到完整的邻里覆盖 下面是代码，非常感谢Javascript 谷歌地图上的D3覆盖未完全渲染,javascript,css,google-maps,d3.js,google-maps-api-3,Javascript,Css,Google Maps,D3.js,Google Maps Api 3,作为背景，我一直在做一个小项目，在谷歌地图上的d3覆盖图中突出显示当地社区和犯罪事件，但发现我的覆盖图只显示了部分内容 最初的目标是实现某种视觉效果，比如渲染的地图 此目标/示例映射的代码可以在中看到。我用这个例子来指导我目前的工作 不幸的是，当我用谷歌地图为我的目标视图运行覆盖代码时，我发现只有一小部分的总体d3路径实际呈现在谷歌地图上。通过控制台中的调试，我可以看到所有相关的geojson数据正在加载，每个路径数组都包含在一个路径节点中，但地图上只显示了一个或两个路径-例如，我只看到一个或两
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function draw(geo_data) {
"use strict";
var margin = 100,
width = 1400 - margin,
height = 1000 - margin;
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "SvgOverlay");
var svg = layer.append("svg");
var neighborhoods = svg.append("g").attr("class", "Neighborhoods");
overlay.draw = function(){
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x, pixelCoordinates.y];
};
path = d3.geo.path().projection(googleMapProjection);
neighborhoods.selectAll("path")
.data(geo_data.features)
.enter()
.append("path")
.attr("d", path);
};
};
overlay.setMap(google_base);
};
</script>
</head>
<body>
<div id="google_map">
</div>
<script type="text/javascript">
var google_base = new google.maps.Map(d3.select("#google_map").node(), {
zoom: 13,
center: new google.maps.LatLng(37.81, -122.26),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: false,
styles:[{"stylers": [{"saturation": -50},{"lightness": 75}]}]
});
d3.json("neighborhoods.geojson", draw);
</script>
</body>
</html>
行
.attr（“d”，路径）看起来可疑。你想通过一个活动吗？谢谢你的提示@Anko。我不认为这是问题的根源，因为这是更新现有路径，而不是绑定数据，这也是我一直遵循的示例中的方法，以及mbostock中的一个示例，但可能需要用每个路径元素的函数调用替换路径-将进行调查看起来可疑。你想通过一个活动吗？谢谢你的提示@Anko。我不认为这是问题的根源，因为这是更新现有路径，而不是绑定数据，这也是我一直在遵循的示例中的方法，以及mbostock中的示例，但可能需要用每个路径元素的函数调用替换路径-将进行调查。
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "Montclair" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.21594888924534, 37.832181779651613 ], [ -122.199005320235656, 37.839802502024263 ], [ -122.195700218341074, 37.834717626248832 ], [ -122.204865526096057, 37.83063877524836 ], [ -122.204065506384751, 37.826138894083272 ], [ -122.203989505503827, 37.825037923657973 ], [ -122.204862534763905, 37.82484093266519 ], [ -122.206357582839033, 37.825825912182573 ], [ -122.207037605809575, 37.825554922390438 ], [ -122.21045471226752, 37.829664825068207 ], [ -122.212788791761739, 37.828300871884338 ], [ -122.21104273740049, 37.826278919502776 ], [ -122.209740697282683, 37.824438964026321 ], [ -122.209719696572449, 37.824446963720987 ], [ -122.207737635353567, 37.821578033328542 ], [ -122.207938642362265, 37.821377039630789 ], [ -122.208037645976759, 37.82117704547791 ], [ -122.208238653148413, 37.820877054469094 ], [ -122.210140719787248, 37.818876116804304 ], [ -122.211442762016475, 37.819577103232504 ], [ -122.212243787852969, 37.820077093014056 ], [ -122.214446859285928, 37.821177072378525 ], [ -122.215348888403369, 37.821678062551726 ], [ -122.216549926889712, 37.822478045852897 ], [ -122.216749933170547, 37.822678041257156 ], [ -122.217351952809793, 37.822878038347341 ], [ -122.218401986194451, 37.823679020982773 ], [ -122.221157073570424, 37.825778975452437 ], [ -122.222459113734274, 37.827279940103317 ], [ -122.222759122864446, 37.827679930485409 ], [ -122.223861155874616, 37.829379888880801 ], [ -122.224462173475956, 37.830480861460941 ], [ -122.223133128544632, 37.830996841877365 ], [ -122.222659112528717, 37.83118083489429 ], [ -122.221358066237769, 37.83288178322033 ], [ -122.219555006623537, 37.832981772972666 ], [ -122.218852983299286, 37.833081767323314 ], [ -122.217851950689095, 37.832881768578396 ], [ -122.217351934210413, 37.832881766490274 ], [ -122.21594888924534, 37.832181779651613 ] ] ] } }