在django中的d3.js中加载.csv文件不起作用 [英] Loading a .csv file in d3.js inside django is not working

查看:230
本文介绍了在django中的d3.js中加载.csv文件不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am trying to load a csv file inside django in javascript but it gives me an error: http://127.0.0.1:8000/data.csv is not found , the data.csv location is inside the templates folder with the html page.

我的代码:

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

推荐答案

首先,您需要了解Django服务器的工作方式,并在Django

First You would need to look how Django server works and to serve static file in Django link.

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

You can not just load static file as d3.csv("data.csv")

然后按照以下步骤操作

1..在settings.py

1. Add Following in settings.py

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

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

2. Create static folder inside root project folder and add csv file inside static folder

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

3. The you need to serve static file and load

  • {%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

If your file is not static and user uploaded media file just replace d3.csv code as below. And before this you need add MEDIA_URL and MEDIA_ROOT in settings as below

  • 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文件不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆