gpt4 book ai didi

javascript - map 未使用 d3.js 加载?

转载 作者:行者123 更新时间:2023-12-03 10:03:08 24 4
gpt4 key购买 nike

这是我第一次尝试将 d3 用于网络 map ,尽管我确实复制了相同的源代码,但我遇到了奇怪的问题。但是, map 无法加载,不知道是数据问题还是代码有问题。希望有人能解决!!

这是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("new paragraph!");

var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height",1160)

d3.json("usa.geojson", function (data) {

var group = svg.selectAll("g")
.data(data.features)
.enter()
.append("g")

var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

var areas = group.append("path")
.attr("d",path)
.attr("class", "area")
.attr("fill", "steelblue")
});

</script>
</body>

geojson 文件:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"properties": { "GEO_ID": "0400000US23", "STATE": "23", "NAME": "Maine",
"LSAD": "", "CENSUSAREA": 30842.923000 },
"geometry": { "type": "MultiPolygon", "coordinates":

最佳答案

您的代码有两个问题:

  1. 您通过评论/保管箱提供的 GeoJSON 格式不正确。前往亚利桑那州的 44 路线路已中断。

  2. 您可以改进 JSON 回调函数以正确处理错误。正如 API 文档上所述 d3.json() :

    the callback is invoked with two arguments: the error, if any, and the parsed JSON

    您应该定义一个具有两个参数的回调

    d3.json("usa.geojson", function (error, data) {

我已经纠正了这些错误并整理了一个有效的 Plunk 。请注意,在此示例中仅显示了少数几个州,因为我必须删除 usa.geojson 文件才能在 plnkr.co 上处理它。

关于javascript - map 未使用 d3.js 加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30487316/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com