在 django 内的 d3.js 中加载 .csv 文件不起作用答案

【问题标题】：Loading a .csv file in d3.js inside django is not working在 django 内的 d3.js 中加载 .csv 文件不起作用
【发布时间】：2019-03-03 01:31:45
【问题描述】：

我正在尝试在 django 中使用 javascript 加载 csv 文件，但它给了我一个错误：http://127.0.0.1:8000/data.csv is not found ，data.csv 位置在带有 html 页面的模板文件夹内。

我的代码：

    d3.csv("data.csv", function(d, i, columns) {
    for (var i = 1, n = columns.length; i < n; ++i)
             d[columns[i]] = +d[columns[i]];
             return d;
     }, function(error, data) {
       if (error) throw error;
       }

【问题讨论】：

http://127.0.0.1:8000/data.csv 的请求中没有目录，所以它没有在模板文件夹中查找
怎么解决？
了解 Django 和 HTTP 的工作原理
别忘了阅读 Django 官方文档docs.djangoproject.com/en/3.1/howto/static-files

标签： django d3.js

【解决方案1】：

首先您需要了解 Django 服务器是如何工作的，并在 Django link 中提供静态文件@。

您不能只将静态文件加载为 d3.csv("data.csv")

然后按照以下步骤操作

1.在settings.py中添加Following

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2.在根项目文件夹中创建静态文件夹，并在静态文件夹中添加csv文件

3.您需要提供静态文件并加载

{% load static %} 在顶部
{% static "data.csv" %}


{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h1>hello d3</h1>
<div>
</div>
<script>
    d3.csv('{%  static 'data.csv' %}', function (err, csv) {
        console.log(csv)
    });
</script>
</body>
</html>

如果您的文件不是静态文件并且用户上传的媒体文件只需替换 d3.csv 代码，如下所示。在此之前，您需要在设置中添加 MEDIA_URL 和 MEDIA_ROOT，如下所示

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

visualisation.html

<script>
d3.csv('{{ object.file.url}}', function (err, csv) {
        console.log(csv)
    });
</script>

【讨论】：