我已经快速提供静态 js 文件,其中包含 d3.js (v4) 的本地副本。所有其他 js 文件都从我的标签加载,但它说 d3 未定义。我也尝试过从 url 加载,但没有骰子,jquery 加载正常(“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”),但不是 d3(“https://d3js.org/d3.v4.min.js”)。
显然它能够找到资源,因为我没有得到 404,但它永远不会运行。当我将 console.log('hello') 放入 d3 源时,它不会显示。
我已经在 Chrome 和 Firefox 中尝试过了。我看到了说使用 http-server 的答案,但 Express 的静态服务器不是在做同样的事情吗?
如果您有想法,请提前致谢。
文件结构:
app.js:
const express = require('express');
const app = express();
const router = express.Router();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');
const graph = require('./graph');
//urls to use
const localMongoUrl = "mongodb://localhost:27017/test";
const url = localMongoUrl
//connect to db. make sure mongo daemon is running.
mongoose.connect(url);
const connection = mongoose.connection;
connection.on('error', err => console.err(err));
connection.on('open', err => {
if (err) console.err(err);
else console.log('connected to ' + url);
});
//middleware attaches form info to req.body
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//set up pug as the templating engine
app.set('view engine', 'pug');
//serve up files in public folder
app.use(express.static('public'));
//setup router as middleware
app.use('/', router);
//serve up the index page when root is hit
router.get('/', (req, res) => {
connection.db.listCollections().toArray((err, collections) => {
if (err) {
console.log(err);
res.json(err);
res.end();
} else {
const collectionNames = collections.map(collection => {
return collection.name;
})
req.collectionNames = collectionNames;
res.render('layout', { names: req.collectionNames, url: url });
}
});
})
//route for when user selects which collection in dropdown
router.use('/collections', routes);
router.use('/graph', graph);
//listen for requests
app.listen(3000, () => {
console.log('Listening on 3000');
});
图.pug
html
head
title GateCounts Graph
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
link(rel="stylesheet" href="/css/styles.css")
link(rel="stylesheet" href="/css/barchart.css")
link(rel="stylesheet" href="/css/pikaday.css")
body
.page-wrapper
.row
.col-md-2
h1 D3 Graph w/ Mongodb
.form-wrapper#graph-query
form(method="POST" action="/graph/getgraph")
fieldset.form-group
legend Date Range
input.form-control(type="text" id="fromDate" name="fromDate" placeholder="From:")
input.form-control(type="text" id="toDate" name="toDate" placeholder="To:")
fieldset.form-group
div.form-check
label.form-check-label(for="sunday") Sunday  
input.form-check-input(type="checkbox" id="sunday" name="weekdays" value="1" checked)
div.form-check
label.form-check-label(for="monday") Monday  
input.form-check-input(type="checkbox" id="monday" name="weekdays" value="2" checked)
div.form-check
label.form-check-label(for="tuesday") Tuesday  
input.form-check-input(type="checkbox" id="tuesday" name="weekdays" value="3" checked)
div.form-check
label.form-check-label(for="wednesday") Wednesday  
input.form-check-input(type="checkbox" id="wednesday" name="weekdays" value="4" checked)
div.form-check
label.form-check-label(for="thursday") Thursday  
input.form-check-input(type="checkbox" id="thursday" name="weekdays" value="5" checked)
div.form-check
label.form-check-label(for="friday") Friday  
input.form-check-input(type="checkbox" id="friday" name="weekdays" value="6" checked)
div.form-check
label.form-check-label(for="saturday") Saturday  
input.form-check-input(type="checkbox" id="saturday" name="weekdays" value="7" checked)
fieldset.form-group
div.form-check
label.form-check-label(for="sunday") Include Closed Days?  
input.form-check-input(type="checkbox" id="includeClosed" name="includeClosed" value="true" checked)
button.btn(type="submit") Submit
hr
.summaryBox
h4 Summary
ul.list-group#summary-list
.col-md-10
h4 GateCounts Graph
.graphBox
#graph
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js")
script(scr="js/d3.js")
script(src="js/barchart.js")
script(src="js/pikaday.js")
script(src="js/initGraph.js")
script(src="js/events.js")
最佳答案
您正在从 ./public
中提供静态文件目录与 app.js
位于同一目录下在该文件夹下,您需要有一个js
目录 d3.js
在那之下。如果您安装了D3 from npm ,那么它将在您的 <project root>/node_modules
中您需要从那里找到 d3.js 并将其复制过来。您可以使用大量工具来使构建任务实现自动化。
确保文件位于 public/js
中并且这是正确的。然后再试一次。
编辑:要补充的是,如果您在开发工具中检查“网络”选项卡并且没有对此进行 404 处理,请转到要求 d3.js 的行并单击它,然后单击响应标签。看看您做了得到了什么,因为这可以说明很多问题所在。
编辑 #2:也可能是 script(scr="")
中的拼写错误:)
关于javascript - D3.js 未定义,快速提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43923188/