我的d3地图不会加载。有人可以帮忙吗？
这是我的代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
path {
stroke-width: 1.75px;
stroke: #531b93;
fill: #919191;
cursor: pointer;
}
path:hover, path.highlighted {
fill: #0096ff;
}
div.tooltip {
position: absolute;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
//Map dimensions (in pixels)
var width = 600,
height = 600;
//Map projection
var projection = d3.geo.mercator()
.scale(58722.369041340586)
.center([-73.97768078496284,40.705833704252484]) //projection center
.translate([width/2,height/2]) //translate to center the map in view
//Generate paths based on projection
var path = d3.geo.path()
.projection(projection);
//Create an SVG
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//Group for the map features
var features = svg.append("g")
.attr("class","features");
//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.behavior.zoom()
.scaleExtent([1, Infinity])
.on("zoom",zoomed);
svg.call(zoom);
//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");
d3.json("NYC_MapInfos.geojson",function(error,geodata) {
if (error) return console.log(error); //unknown error, check the console
//Create a path for each map feature in the data
features.selectAll("path")
.data(geodata.features)
.enter()
.append("path")
.attr("d",path)
.on("mouseover",showTooltip)
.on("mousemove",moveTooltip)
.on("mouseout",hideTooltip)
.on("click",clicked);
});
// Add optional onClick events for features here
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {
}
//Update map on zoom/pan
function zoomed() {
features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
.selectAll("path").style("stroke-width", 1.75 / zoom.scale() + "px" );
}
//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};
//Create a tooltip, hidden at the start
function showTooltip(d) {
moveTooltip();
tooltip.style("display","block")
.text(d.properties.PO_NAME);
}
//Move the tooltip to track the mouse
function moveTooltip() {
tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
.style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}
//Create a tooltip, hidden at the start
function hideTooltip() {
tooltip.style("display","none");
}
</script>
答案 0 :(得分：0)
您可以使用geojson数据尝试使用geojson2svg模块创建SVG地图。由于这只是简单的JavaScript，您将拥有更多控制权。这是你的例子
你的html页面（index.html）：
<html>
<head>
<link rel="stylesheet" href="./map.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojson2svg/1.0.3/geojson2svg.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geosquare/reproject-spherical-mercator/v0.1.3/dist/reproject-spherical-mercator.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geosquare/geojson-bbox/master/dist/geojson-bbox.min.js"></script>
</head>
<body>
<h2>Example of New York postal code map created with geojson2svg</h2>
<div id="mapArea" style="width:600px;height:600px;">
<svg id="map" xmlns="http://www.w3.org/2000/svg"
width="600" height="600" x="0" y="0" >
</svg>
<div class="tooltip" ></div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
Javascript代码（main.js）：
var dataURI = "http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson";
$.get(dataURI,drawGeoJSON);
$('#map').on('mouseover','path',function(ev) {
console.log(ev.target.feature.properties.postalCode);
var tooltip = document.querySelector('.tooltip');
tooltip.style.top = ev.pageY - 30;
tooltip.style.left = ev.pageX + 5;
tooltip.style.display = 'block';
tooltip.innerHTML = ev.target.feature.properties.PO_NAME;
});
$('#map').on('mouseout','path',function(ev) {
var tooltip = document.querySelector('.tooltip');
tooltip.style.display = 'none';
});
function drawGeoJSON(geojson) {
// covert wgs84 data to Web Mercator projection
var geojsonMerc = reproject(geojson);
// reproject: https://github.com/geosquare/reproject-spherical-mercator
var extent = bbox(geojsonMerc);
// bbox: https://github.com/geosquare/geojson-bbox
var mapExtent = {
left: extent[0],
bottom: extent[1],
right: extent[2],
top: extent[3]
};
var svgMap = document.getElementById('map');
// geojson2svg: https://github.com/gagan-bansal/geojson2svg
var convertor = geojson2svg(
{
viewportSize: {width:600,height:600},
mapExtent: mapExtent,
attributes: {
'vector-effect':'non-scaling-stroke'
},
explode: false
}
);
geojsonMerc.features.forEach(function(f) {
var svgStr = convertor.convert(f,{attributes: {id: 'pc-'+f.properties.OBJECTID}});
var svg = parseSVG(svgStr);
svgMap.appendChild(parseSVG(svgStr));
var svgEle = svgMap.querySelector('#' + 'pc-'+f.properties.OBJECTID);
svgEle.feature = f;
});
}
//parseSVG from http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
和CSS（map.css）：
body {
font: 12px sans-serif;
}
path {
stroke-width: 1px;
stroke: #531b93;
fill: #919191;
cursor: pointer;
}
path:hover, path.highlighted {
fill: #0096ff;
}
div.tooltip {
position: absolute;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
padding: 4px 8px;
display: none;
}
如需提前使用，请查看this blog