Question

我正在尝试使用javascript在django中加载一个csv文件，但它给了我一个错误：未找到http://127.0.0.1:8000/data.csv，data.csv位置位于html页面的templates文件夹中。

我的代码：

    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;
       }

Answer 1

首先，您需要了解Django服务器的工作方式并在Django keypad 中提供静态文件。

您不能只将静态文件加载为d3.csv（“ data.csv”）

然后按照以下步骤

1。。在settings.py

中添加关注对象

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>

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

1 个答案: