Question

我正在尝试将数据（库存信息）从烧瓶传递到d3js。

以下是我的代码。我能够看到当我选择不同的股票时，我可以看到使用console.log函数将数据从flask传递到html页面。我知道我的烧瓶代码有效。我是java脚本的初学者。我从不同的来源攻击了这个代码。

烧瓶代码：

from flask import Flask, render_template, request, jsonify
import os
import json
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html, components
import pandas as pd

app = Flask(__name__)


files_list = os.listdir("/Users/kpatel/Desktop/test2/data")

@app.route('/')
def index():

    return render_template('index.html', files_list=files_list)


@app.route('/stocks')
def stocks():
    a = request.args.get('a', 0, type=str)
    data_df = pd.read_csv("/Users/kpatel/Desktop/test2/data/"+a)
    data_df["date"] =  pd.to_datetime(data_df['Date'], format='%Y-%m-%d %H:%M:%S.%f')
    data_df.drop('Date', axis=1, inplace=True)

    data = data_df.to_json(orient="records")

    return data

if __name__ == '__main__':
     app.run(debug=True)

现在出现问题，我无法在html页面中看到图像。以下代码创建空间，但不创建图像。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
          rel="stylesheet">


    <script type=text/javascript>
   $(document).ready(function(){

    $("#stocks").change(function(){
      $.getJSON('/stocks', {
          a: $(this).val()
        }, function(data) {
          var data = {{ data|safe }}
          draw(data)
          $("#result").text(data.result);
        });
        return false;

    console.log();

  });
});


  </script>
     <style>

    body {
      font: 10px sans-serif;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .x.axis path {
      display: none;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    </style>
  </head>
  <body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>



      var margin = {top: 20, right: 80, bottom: 30, left: 50},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

      var parseDate = d3.time.format("%Y%m%d").parse;

      var x = d3.time.scale()
          .range([0, width]);

      var y = d3.scale.linear()
          .range([height, 0]);

      var color = d3.scale.category10();

      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");

      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");

      var line = d3.svg.line()
          .interpolate("basis")
          .x(function(d) { return x(d.date); })
          .y(function(d) { return y(d.temperature); });

      var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


      function draw(data) {


        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

        data.forEach(function(d) {
          d.date = parseDate(d.date);
        });

        var cities = color.domain().map(function(name) {
          return {
            name: name,
            values: data.map(function(d) {
              return {date: d.date, price: +d[name]};
            })
          };
        });

        x.domain(d3.extent(data, function(d) { return d.date; }));

        y.domain([
          d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
          d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
        ]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");

        var city = svg.selectAll(".city")
            .data(cities)
          .enter().append("g")
            .attr("class", "city");

        city.append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.name); });

        city.append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; })
            .attr("x", 3)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });
      };

  </script>

    <div class="container">
      <div class="header">
        <h3 class="text-muted">How To Manage JSON Requests</h3>
      </div>
      <hr/>
      <div>
      <select id="stocks" class="target">
        {% for list_ in files_list %}
          <option value={{list_}} >{{list_}}</option>
        {% endfor %}

      </select>
      </div>
      <div>
      <p>
      <span id="result">?</span>
      </div>
    </div>
  </body>
</html>

错误如下：

d3.v3.min.js：1未捕获的TypeError：t.slice不是functionJn @ d3.v3.min.js：1e @ d3.v3.min.js：1t.parse @ d3.v3.min.js：1（匿名功能）@（索引）：100draw @（索引）：99（匿名函数）@ （索引）：17c @ jquery.min.js：3p.fireWith @jquery.min.js：3k @ jquery.min.js：5r @ jquery.min.js：5

这里有什么问题？

d3js抛出以下错误d3.v3.min.js：1未捕获TypeError：t.slice不是函数

0 个答案: