问题描述
我是D3和JSON的新手,所以请多多包涵。我正在尝试学习如何显示地图,并没有遵循教程和示例代码(例如http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922,https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js)。我最终希望将数据绑定到地图,但是我目前仍无法显示地图文件。 Chrome没有给我任何错误,它只显示一个空白页和一个空控制台。
我按照 Web交互式数据可视化中的建议设置了自己的Web服务器,并按照指示将工作文件保存在“ www”文件夹中。
我知道在这个论坛上已经问过很多类似的问题,但是没有一个解决方案起作用。我尝试过:
这是我的代码当前的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>D3: Applying a projection to SVG paths</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
path {
stroke: white;
stroke-width: 0.5px;
fill: black;
}
</style>
</head>
<body>
//Sample text to see if anything is working.
<script type="text/javascript">
d3.select("body").append("p").text("Making sure this works.");
</script>
//Code minimally adapted from Scott Murray's D3 book.
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geoAlbersUsa()
.translate([w/2,h/2]);
//Define path generator
var path = d3.geoPath()
.projection(projection)
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
//Load in GeoJSON data
d3.json("us-states.json",function(error,data) {
if (error) return console.error(error);
console.log(data);
//Bind data and create one path per GeoJSON feature
svg.selectAll(path)
.data(json.features)
.enter()
.append(path)
.attr("d",path)
.style("stroke","#fff")
.style("stroke-width","1")
.style("fill","steelblue");
}
);
</script>
//Sample text to see if anything is working.
<script type="text/javascript">
d3.select("body").append("p").text("And this too.");
</script>
</body>
</html>
Chrome会加载页面-我将示例文本放在代码中的几个地方,以确保它正在执行 something 并且那些看起来很好。但是,我要求将数据记录在控制台上,但是什么也没有。
我的代码可能还有其他问题,但是我怀疑此障碍与地图文件和Web服务器有关,因为我可以毫无问题地创建其他svg对象。感谢您的支持!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)