如何在Django JS中创建空白的Lower 48 Map

Question

我试图在Django应用程序中创建一个空白地图(通过JS脚本)来填充一些数据。我不寻找任何东西，除了一个div与状态线绘制。

本教程试图在d3中做到这一点。不幸的是，这里对json文件的本地文件引用已经过时，不再有效。

考虑到所有的事情，我试着从命令行中使用模块化的-m标志。我加载basemap和json文件的代码如下所示(json文件与调用它的html存储在同一个目录中)

/*
Functions for graphing Terra data on basemap
Uses d3 library
*/
async function init() {
let data = [0, 1, 2, 3, 4]
// Set some specifications for the basemap
let basemap_width = 960
let basemap_height = 500

// Build d3 projection
// Scale in size to fit entire US
let projection = d3.geo.albersUsa()
.translate([basemap_width/2, basemap_height/2])
.scale([1000]);         

// Define path generator
let path = d3.geo.path()               
.projection(projection)  

// Define scale and legend for basemap
let color = d3.scale.linear()
.range(["rgb(213,222,217)","rgb(69,173,168)","rgb(84,36,55)","rgb(217,91,67)"]);
let legendText = ["Some range of values"];
// Create SVG element and append map to the SVG
let svg = d3.select("body")
.append("svg")
.attr("width", basemap_width)
.attr("height", basemap_height);

// Append Div for tooltip to SVG
let div = d3.select("body")
.append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

// Load GeoJSON data into basemap
d3.json("../us-states.json", function(json) { // I've tried this without the .. in the relative path as well
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
// Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++)  {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
// Copy the data value into the JSON
json.features[j].properties.visited = dataValue; 
// Stop looking through the JSON
break;
}               
}
}

// Bind the data to the SVG 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", function(d) {
// Some code to fill in color
//});
});
}
init();

实现这一点的最简单方法是什么，以便我可以开始尝试加载我的数据?

Answer 1

由于url路径不正确，代码无法工作。您正在声明文件的位置，就像本地硬盘驱动器中的文件一样。../不是async请求的有效url路径。

d3.json("../us-states.json", () => { /* ... */})

d3.json()只是一个异步数据获取器。在内部，d3.json是一个愚蠢的简单包装器。看一下代码，它一点也不过时． 甚至D3团队也没有说它过时了。

// https://github.com/d3/d3-fetch/blob/main/src/json.js
function responseJson(response) {
if (!response.ok) throw new Error(response.status + " " + response.statusText);
if (response.status === 204 || response.status === 205) return;
return response.json();
}
export default function(input, init) {
return fetch(input, init).then(responseJson);
}

<标题>

解决方案检查本地json文件是如何通过url路径提供的。不能是相对目录(文件夹)． Javascript和您的web浏览器不知道正在运行的Javascript的文件位置。它只知道给定域的绝对根。

"../file.json" --> wrong❌
"/resources/file.json" --> correct✅ the absolute root(/) of current domain is understood.
"https://example.com/resources/file.json" --> correct✅ full url was given.

在运行代码之前，请尝试通过浏览器访问或通过shell下载来检查文件是否正确服务。

$ curl https://example.com/resources/file.json