У меня нет ошибок в моей консоли, и мой сервер xampp запущен. Я вызываю код в моем браузере с http://localhost/d3/project/graph1.html, который должен быть правильным путем. Но страница просто белая, она не показывает мне карту США. Это те сценарии, которые я вставил в голову
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v2.min.js"></script>
Это мой код, не обращайте внимания на комментарии:
<head>
.state{
fill:none;
stroke: #333;
stroke-width: 1.0;
}
.county{
fill: #e3e3e3;
stroke: #fff;
stroke-width: 0.5;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var margin = {top: 0, left: 0, right: 0, bottom: 0},
height = 400 - margin.top - margin.bottom,
width = 800 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.json, "us.json")
//.defer(d3.csv, "final_cleaned_wildlife_impacts.csv")
.await(ready);
var projection = d3.geoAlbersUsa()
.translate([width/2, height/2])
.scale(800);
var path = d3.geoPath()
.projection(projection);
function ready(error, data/*, airport*/){
var counties = topojson.feature(data, data.objectes.counties).features;
svg.selectAll(".county")
.data(counties)
.enter()
.append("path")
.attr("class", "county")
.attr("d", path);
var states = topojson.feature(data, data.objectes.states).features;
svg.selectAll(".state")
.data(states)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path);
/*
svg.selectAll(".airport")
.data(airports)
.enter().append("circle")
.attr("class", "airport")
.attr("r", 2)
.attr("cx", function(d){
var coords = projection([d.long, d.lat])
return coords[0]
})
.attr("cy", function(d){
var coords = projection([d.long, d.lat])
return coords[1]
})
.attr("opaciy", "0.25");
*/
}
</script>
</body>