我对节点和表达还很陌生,正在尝试将一些 d3 可视化集成到我的网页中。基本上,我有一个生成所有 d3 内容的 js 文件,然后我将其包含在我的 .ejs 文件中。我正在尝试关注我过去使用 d3 所做的项目,并试图将我的 csv 文件导入到我的 d3 js 文件中。但是,我得到了错误“加载模块脚本失败:服务器以非 JavaScript MIME 类型“text/csv”响应。这是我的设置:// user-influence-viz.js// this line gives error, worked in a past project that didn't use expressimport influence_csv from "./influenceByMonth.csv"const SVG_WIDTH = 600;const SVG_HEIGHT = 600;// rest of code below, irrelevant so leaving out to reduce clutter<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stats</title> <link rel="stylesheet" href="/css/style.css"></head><body> <h1>Stats</h1> <div class="display-container"> <div class="tab-content" id="tab1Content"> <!-- Data viz goes in here, placed here by d3 code --> </div> <div class="tab-content">Tab 2 Content</div> <div class="tab-content">Tab 3 Content</div> <div class="tab-content">Tab 4 Content</div> </div> <script src="https://d3js.org/d3.v5.min.js"></script> <script type="module" src="user-influence-viz.js" defer></script> <script src="javascripts/bundle.js" defer></script></body></html>如果这不是正确的方法,那么正确的方法是什么?查找了一堆其他资源,但没有解决这个问题,所以我可能缺乏一些基本知识。谢谢!
1 回答
慕少森
TA贡献2019条经验 获得超9个赞
我从未见过有人以这种方式导入非 javascript 文件。这可能是可能的,但如果是这样,我不知道正确的语法是什么。导入文档似乎暗示它仅适用于 JS 文件。
看起来您正在使用此客户端,因此只需使用像PapaParse这样的纯 js CSV 解析库。
用法示例:
Papa.parse("/whatever/the/path/is/influenceByMonth.csv", {
download: true,
complete: function(results) {
console.log(results);
}
});
有很多不同的库可以做到这一点,选择你最喜欢的。
如果您担心图书馆的加载时间会使您的网站变慢,您也可以使用 Ajax 请求数据并自己解析它——这并不难,除非您的数据非常时髦。这是一个教程。这个特定的教程使用 jQuery,但完全可以不用它:只需使用 vanilla JS XMLHttpRequest而不是$.ajax(...)
. 为什么要重新发明轮子呢?
添加回答
举报
0/150
提交
取消