Django 中的 js 找不到文件

Question

我正在尝试使用以下示例：https://bl.ocks.org/anilnairxyz/a51393d7c51342abe8d4e3f4cbab7ae1

我已经通过简单的调整修改了示例，使其在 Django 框架中落地。这是模板代码：
temp.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'test/cschart.css' %}">
</head>
<body>
    <div id="demobox">
        <div id="csbox">
            <div id="option">
                <input id="oneM" name="1M" type="button" value="1M"/>
                <input id="threeM" name="3M" type="button" value="3M" />
                <input id="sixM" name="6M" type="button" value="6M" />
                <input id="oneY" name="1Y" type="button" value="1Y" />
                <input id="twoY" name="2Y" type="button" value="2Y" />
                <input id="fourY" name="4Y" type="button" value="4Y" />
            </div>
            <div id="infobar">
                <div id="infodate" class="infohead"></div>
                <div id="infoopen" class="infobox"></div>
                <div id="infohigh" class="infobox"></div>
                <div id="infolow" class="infobox"></div>
                <div id="infoclose" class="infobox"></div>
            </div>
            <div id="chart1"></div>
        </div> <!-- csbox -->
    </div> <!-- demobox -->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="{% static 'test/cschart.js' %}"></script>
    <script src="{% static 'test/csbars.js' %}"></script>
    <script src="{% static 'test/csheader.js' %}"></script>
    <script src="{% static 'test/csdataprep.js' %}"></script>
    <script src="{% static 'test/csmain.js' %}"></script>
</body>
</html>

views.py

def temp(request):
    return render(request, 'tt/temp.html', {})

urls.py

urlpatterns = [
    path('tt/', views.show),
    path('pie/', views.pie),
    path('dd3/', views.testingD3),
path('fera/', views.fera),
path('line/', views.lined3),
path('temp/', views.temp),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

我将完整的js和css保存在static/test文件夹中，并成功访问了js和css。但是我找不到 stockdata.csv 文件。查看文件目录：

这是控制台日志中的问题：

请帮我找到文件。我什至尝试创建一个名为 temp 的文件夹并将 csv 文件放入其中但失败了，因为我仍然遇到同样的错误。

给出问题的js文件在这里：

var parseDate    = d3.time.format("%Y-%m-%d").parse;
var TPeriod      = "3M";
var TDays        = {"1M":21, "3M":63, "6M":126, "1Y":252, "2Y":504, "4Y":1008 };
var TIntervals   = {"1M":"day", "3M":"day", "6M":"day", "1Y":"week", "2Y":"week", "4Y":"month" };
var TFormat      = {"day":"%d %b '%y", "week":"%d %b '%y", "month":"%b '%y" };
var genRaw, genData;

(function() {
    d3.csv("stockdata.csv", genType, function(data) {
      genRaw         = data;
      mainjs();
    }); 
}());

function toSlice(data) { return data.slice(-TDays[TPeriod]); }

function mainjs() {
  var toPress    = function() { genData = (TIntervals[TPeriod]!="day")?dataCompress(toSlice(genRaw), TIntervals[TPeriod]):toSlice(genRaw); };
  toPress(); displayAll();
  d3.select("#oneM").on("click",   function(){ TPeriod  = "1M"; toPress(); displayAll(); });
  d3.select("#threeM").on("click", function(){ TPeriod  = "3M"; toPress(); displayAll(); });
  d3.select("#sixM").on("click",   function(){ TPeriod  = "6M"; toPress(); displayAll(); });
  d3.select("#oneY").on("click",   function(){ TPeriod  = "1Y"; toPress(); displayAll(); });
  d3.select("#twoY").on("click",   function(){ TPeriod  = "2Y"; toPress(); displayAll(); });
  d3.select("#fourY").on("click",  function(){ TPeriod  = "4Y"; toPress(); displayAll(); });
}

function displayAll() {
    changeClass();
    displayCS();
    displayGen(genData.length-1);
}

function changeClass() {
    if (TPeriod =="1M") {
        d3.select("#oneM").classed("active", true);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="6M") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", true);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="1Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", true);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="2Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", true);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="4Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", true);
    } else {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", true);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    }
}

function displayCS() {
    var chart       = cschart().Bheight(460);
    d3.select("#chart1").call(chart);
    var chart       = barchart().mname("volume").margin(320).MValue("TURNOVER");
    d3.select("#chart1").datum(genData).call(chart);
    var chart       = barchart().mname("sigma").margin(400).MValue("VOLATILITY");
    d3.select("#chart1").datum(genData).call(chart);
    hoverAll();
}

function hoverAll() {
    d3.select("#chart1").select(".bands").selectAll("rect")
          .on("mouseover", function(d, i) {
              d3.select(this).classed("hoved", true);
              d3.select(".stick"+i).classed("hoved", true);
              d3.select(".candle"+i).classed("hoved", true);
              d3.select(".volume"+i).classed("hoved", true);
              d3.select(".sigma"+i).classed("hoved", true);
              displayGen(i);
          })                  
          .on("mouseout", function(d, i) {
              d3.select(this).classed("hoved", false);
              d3.select(".stick"+i).classed("hoved", false);
              d3.select(".candle"+i).classed("hoved", false);
              d3.select(".volume"+i).classed("hoved", false);
              d3.select(".sigma"+i).classed("hoved", false);
              displayGen(genData.length-1);
          });
}

function displayGen(mark) {
    var header      = csheader();
    d3.select("#infobar").datum(genData.slice(mark)[0]).call(header);
}

看看我的 setting.py 文件

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
print("Base URL is \n:    ",BASE_DIR)

SECRET_KEY = '#7xfs=i@n*!frchr_e)vaw!r=1c2fy-zu%070gdy6fe_=h_du_'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['127.0.0.1']    


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'demod3',
    'django_nvd3',
    'djangobower',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

ROOT_URLCONF = 'mysite.urls'


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# Password validation
# https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'Asia/Seoul'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
print("Statcic URL is :    \n:  ", STATIC_ROOT)

Answer 1

在这篇文章中：

(function() {
    d3.csv("stockdata.csv", genType, function(data) {
      genRaw         = data;
      mainjs();
    }); 
}());

更改为：

(function() {
    d3.csv("/static/test/stockdata.csv", genType, function(data) {
      genRaw         = data;
      mainjs();
    }); 
}());

问题是 django 和 js 文件无法共享数据，除非您使用 django 渲染 js。

不确定这在这种情况下是否可行，但您可以取出该特定功能并将其嵌入到您的模板文件中：

<script language="javascript">
    var parseDate    = d3.time.format("%Y-%m-%d").parse;
    var TPeriod      = "3M";
    var TDays        = {"1M":21, "3M":63, "6M":126, "1Y":252, "2Y":504, "4Y":1008 };
    var TIntervals   = {"1M":"day", "3M":"day", "6M":"day", "1Y":"week", "2Y":"week", "4Y":"month" };
    var TFormat      = {"day":"%d %b '%y", "week":"%d %b '%y", "month":"%b '%y" };
    var genRaw, genData;

    (function() {
        d3.csv("{% static 'test/stockdata.csv' %}", genType, function(data) {
          genRaw         = data;
          mainjs();
        }); 
    }());
</script>

不确定这将如何影响脚本的其余部分

Django 中的 js 找不到文件

File is not getting found by the js in Django

python

django

python-3.x

django-staticfiles