Python & D3.js 仪表板交叉过滤器热图

Question

我已在此处成功复制了此交互式仪表板地图example。

我现在想输入我自己的数据。我的 python 比示例中的更简单，因为我的所有数据都已经按照我想要的方式进行了结构化。 这是我的蟒蛇：

    # -*- coding: utf-8 -*-

import pandas as pd
from shapely.geometry import Point, shape

from flask import Flask
from flask import render_template
import json


data_path = './input/'

def get_location(longitude, latitude, ny_json):

    point = Point(longitude, latitude)

    for record in ny_json['features']:
        polygon = shape(record['geometry'])
        if polygon.contains(point):
            return record['properties']['Name']
    return 'other'

with open(data_path + '/geojson/ny_HA.json') as data_file:
    ny_json = json.load(data_file)

app = Flask(__name__)
    #route to html index
@app.route("/")
def index():
    return render_template("index.html")

    #route data
@app.route("/data")
def get_data():
    df = pd.read_csv(data_path + 'Mikes_NY_geocoded_tickets.csv', sep=';')

    df['location'] = df.apply(lambda row: get_location(row['longitude'], row['latitude'], ny_json), axis=1)

    cols_to_keep = ['timestamp', 'longitude', 'latitude', 'Violation', 'Type', 'DayOfWeek', 'location']

    #remove NaN values 
    df_clean = df[cols_to_keep].dropna()
    #return a json
    return df_clean.to_json(orient='records')


if __name__ == "__main__":
    app.run(host='0.0.0.0',port=5000,debug=True)

这是我的数据geocoded_data.csv：

当我运行我的应用程序python app.py 时，没有错误，当我在浏览器中输入本地主机时，我的仪表板出现了，但一切都是空的，我的交叉过滤器和地图。

这是浏览器显示的内容：

这是我在浏览器控制台中的错误 任何想法将不胜感激。

Answer 1

现在您已经展示了您的 JS 代码（在上面的调试器屏幕截图中），很容易猜测出了什么问题。

你有

d["timestamp"] = dateFormat.parse(d["timestamp"]);
d["timestamp"].setMinutes(0); // Error: d["timestamp"] is null

这是documentation for d3.time.format.parse()：

解析指定的字符串，返回对应的日期对象。如果解析失败，返回null。与“自然语言”日期解析器（包括 JavaScript 的内置解析器）不同，此方法是严格的：如果指定的字符串与关联的格式说明符不完全匹配，则此方法返回 null。例如，如果关联格式是完整的 ISO 8601 字符串 "%Y-%m-%dT%H:%M:%SZ"，则字符串 "2011-07-01T19:15:28Z" 将被正确解析，但 "2011-07-01T19:15:28"、"2011-07-01 19:15:28" 和 "2011-07-01" 将返回 null，尽管是有效的 8601日期。

您尚未显示转换前d["timestamp"] 的值是多少，但预期格式与实际格式之间可能存在细微差别。

特别是，如果您的数据截图是正确的，那么您的日期格式中没有秒数，但您的 d3.time.format 说明符期待它们？