2017-01-13 4 views
0

Ich weiß, dass andere Leute diese Frage zuvor beantwortet haben. Ich habe mir diese Antworten angesehen und ihren Ratschlag angewendet, aber ich kann immer noch nicht d3 laden.Uncaught ReferenceError: d3 ist nicht definiert

Ich habe utf-8 in das Meta-Tag in der Kopfzeile Ich habe charset = "utf-8" hinzugefügt. Ich verwende eine lokale Kopie von d3 Ich lade d3, bevor ich jquery laden.

Erkennt immer noch nicht d3. Er sollte "d3" automatisch als "d3.min.js" erkennen, richtig?

Hier ist meine index.html.

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <! [endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Eve PI Profits</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 

    <link rel="stylesheet" href="../static/css/bootstrap.css"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 20px; 
     } 
    </style> 
    <link rel="stylesheet" href="../static/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="../static/css/main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Racing+Sans+One|Righteous|Quicksand" rel="stylesheet"> 
    <script src="../static/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js">  </script> 
</head> 
<body> 
    <!--[if lt IE 8]> 
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="{{url_for('index')}}">EvePIProfits.com</a> 
     <div class="btn"><a href="{{url_for('jita')}}">Jita</a></div> 
     <div class="btn"><a href="{{url_for('amarr')}}">Amarr</a></div> 
     <div class="btn"><a href="{{url_for('rens')}}">Rens</a></div> 
     <div class="btn"><a href="{{url_for('dodixie')}}">Dodixie</a></div> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 


    </div><!--/.navbar-collapse --> 

    </div> 
</nav> 

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
    {% block title %} 
    <h1>EVE PI Profits</h1> 
    <p>Planetary interaction profitability across New Eden</p> 
     <p></p> 
     <p>Select a system above to view profitability. Profit is the sell price of the commodity minus the sell cost of the construction materials. A negative profit margin means that the materials are worth more unassembled than as a finished good, and you lose money if you assembled the product.</p> 
    {% endblock %} 

     {% block content %}{% endblock %} 
    </div> 
</div> 

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <p> 

    </p> 
    </div> 

    <hr> 

    <footer> 
    <p>&copy; Wm. Stephen Scott 2017</p> 
    </footer> 
</div> <!-- /container -->  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> --> 
    <!-- <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> --> 
    <script src="../static/js/vendor/d3.min.js" charset="utf-8"></script> 
    <script src="../static/js/vendor/jquery-3.1.1.js"></script> 
    <script src="../static/js/vendor/bootstrap.min.js"></script> 
    <script src="../static/js/vendor/jquery.dataTables.min.js"></script> 



    <script src="../static/js/main.js"></script> 


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script> 

     (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
     function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
     e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
     e.src='//www.google-analytics.com/analytics.js'; 
     r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
     ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 

    </script> 
</body> 
</html> 

Das ist mein jinja2 Vorlage, die das Skript enthält:

{% extends "index.html"%} 
{% block title %} 
<title>Jita</title> 
<h1>Jita</h1> 
{% endblock %} 
{% block content %} 
<table id="mainTable" class="table table-striped"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Price</th> 
    <th>Profit</th> 
    <th>Profit Margin</th> 
    <th>Datetime</th> 
</tr> 
</thead> 
<tbody> 
{% for entry in entries %} 
<tr> 
    <td>{{entry[0]}}</td> 
    <td>{{entry[1]}}</td> 
    <td>{{entry[2]}}</td> 
    <td>{{entry[3]}}</td> 
    <td>{{entry[4]}}</td> 
</tr> 
{% endfor %} 
<script type="text/javascript"> 
var h = 100; 
var w = 200; 

monthlySales = [ 
    {"month":10, "sales":20}, 
    {"month":20, "sales":14}, 
    {"month":30, "sales":20}, 
    {"month":40, "sales":21}, 
    {"month":50, "sales":15} 
]; 

var lineFun = d3.svg.line() 
    .x(function(d) {return d.month*2;}) 
    .y(function(d) {return h-d.sales;}) 
    .interpolate("linear") 

var svg = d3.select("body").append("svg") 
    .attr({width:w, height:h}); 

var viz = svg.append("path") 
    .attr({ 
    d: lineFun(monthlySales), 
    "stroke": "purple", 
    "fill":"none", 
    "stroke-width":2, 
    }) 
</script> 

</tbody> 
</table> 

<script> 
var persistentData = {{chart|safe}}; 
</script> 
{% endblock %} 
+1

Ich glaube, dass Ihre Vorlage vor dem Laden des d3-Skripts ausgeführt wird. –

+0

Ich habe die src-Zeile an den Anfang des Dokuments verschoben und der Fehler ist verschwunden. Jetzt bekomme ich den Fehler: "Uncaught TypeError: Kann Eigenschaft 'Zeile' von undefined nicht lesen". In Zeile var lineFun = d3.svg.line() So erkennt es d3, aber d3.svg ist noch undefiniert? –

+0

Um Ihre Frage zu beantworten, laden Sie d3 ** Version 4 **, während Ihr Code d3 ** Version 3 ** ist. – Mark

Antwort

0

haben Sie versucht, Ihren Code in "DOMContentLoaded" -Ereignis incapsulate?

document.addEventListener('DOMContentLoaded', function(e) { 
    //....here your code 
}); 
Verwandte Themen