为了账号安全,请及时绑定邮箱和手机立即绑定

无法使用节点和表达式将 csv 文件导入静态文件

无法使用节点和表达式将 csv 文件导入静态文件

12345678_0001 2023-01-06 15:11:28

我对节点和表达还很陌生,正在尝试将一些 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 express

import 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贡献1751条经验 获得超9个赞

我从未见过有人以这种方式导入非 javascript 文件。这可能是可能的,但如果是这样,我不知道正确的语法是什么。导入文档似乎暗示它仅适用于 JS 文件。

看起来您正在使用此客户端,因此只需使用像PapaParse这样的纯 js CSV 解析库。

CDN链接

用法示例:

Papa.parse("/whatever/the/path/is/influenceByMonth.csv", {

    download: true,

    complete: function(results) {

        console.log(results);

    }

});

有很多不同的库可以做到这一点,选择你最喜欢的。

如果您担心图书馆的加载时间会使您的网站变慢,您也可以使用 Ajax 请求数据并自己解析它——这并不难,除非您的数据非常时髦。这是一个教程。这个特定的教程使用 jQuery,但完全可以不用它:只需使用 vanilla JS XMLHttpRequest而不是$.ajax(...). 为什么要重新发明轮子呢?



查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信