D3.jsは定義されていません。静的ファイルを扱います。

Question

静的な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サーバを使用すると答えたのは見ましたが、同じことをする静的なサーバではありません。

アイデアがあれば、事前におねがいします。

ファイル構造：

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

graph.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&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="sunday" name="weekdays" value="1" checked) 
       div.form-check 
        label.form-check-label(for="monday") Monday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="monday" name="weekdays" value="2" checked) 
       div.form-check 
        label.form-check-label(for="tuesday") Tuesday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="tuesday" name="weekdays" value="3" checked) 
       div.form-check 
        label.form-check-label(for="wednesday") Wednesday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="wednesday" name="weekdays" value="4" checked) 
       div.form-check 
        label.form-check-label(for="thursday") Thursday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="thursday" name="weekdays" value="5" checked) 
       div.form-check 
        label.form-check-label(for="friday") Friday&nbsp&nbsp 
        input.form-check-input(type="checkbox" id="friday" name="weekdays" value="6" checked) 
       div.form-check 
        label.form-check-label(for="saturday") Saturday&nbsp&nbsp 
        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?&nbsp&nbsp 
        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") 

Answer 1

./publicディレクトリの静的ファイルを、app.jsが入っているのと同じディレクトリに置いています。そのフォルダの下には、ディレクトリにd3.jsというディレクトリが必要です。 D3 from npmをインストールした場合は、<project root>/node_modulesにありますので、そこからd3.jsを見つけてコピーする必要があります。ビルド・タスクは、自動化するために大量のツールを使用してこれを行うことができます。

ファイルがpublic/jsで、正しいことを確認してください。その後、もう一度試してください。

EDIT：これに追加するには、開発ツールの[ネットワーク]タブを確認していて、これを404'していない場合は、d3.jsを要求している行に移動し、応答タブ。あなたが何を参照してくださいを行うは、何が間違っているかについて多くを言うことができるので、得る。

EDIT＃2：また、たぶん、CDNを使用しないようにしようscript(scr="") :)