Question

我知道其他人之前已回答过这个问题。我查看了这些答案并应用了他们的建议，但我仍然无法加载d3。

我在标题的元标记中包含了utf-8 我添加了charset =“utf-8”。我正在使用d3的本地副本我在加载jquery之前加载了d3。

仍然没有认识到d3。它应该自动将“d3”识别为“d3.min.js”，对吧？

这是我的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>

这是我的jinja2模板，其中包含脚本：

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

Answer 1

您是否尝试将代码封装在＆＃34; DOMContentLoaded＆＃34;事件？

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

未捕获的ReferenceError：未定义d3

1 个答案: