javascript - 通过 Flask 服务器上的队列访问 d3.json 对象时出现问题

Question

在工作中，我接到了一项任务，要做一份非常简单的报告。事实上，太简单了以至于我决定提高难度等级并在 Flask 服务器上使用 dc.js 制作一个交互式图表报告。更重要的是，我从来没有接触过 Flask、dc.js、d3、crossfilter 或 javascript ……(是的；愚蠢是愚蠢的)

让我坚持下去的是 tutorial , 一切都安排得如此容易理解和诱人。

所以现在我在这里，由于时间压力而大汗淋漓，试图将后台生成的数据从 pandas 获取到前端。教程中的代码如下；

queue()
.defer(d3.json, "/donorschoose/projects")
.defer(d3.json, "static/geojson/us-states.json")
.await(makeGraphs);

function makeGraphs(error, projectsJson, statesJson) {

//Clean projectsJson data
var donorschooseProjects = projectsJson;
var dateFormat = d3.time.format("%Y-%m-%d");
donorschooseProjects.forEach(function(d) {
    d["date_posted"] = dateFormat.parse(d["date_posted"]);
    d["date_posted"].setDate(1);
    d["total_donations"] = +d["total_donations"];
});

遵循猴子看猴子做的原则(猴子最近几个小时一直在谷歌搜索，试图了解正在发生的事情，但无济于事)，我的代码如下；

queue()
.defer(d3.json, "/salgshisto")
.await(makeGraphs);

function makeGraphs(error, salgsData) {

var salgsTransaksjonene = salgsData;
var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
salgsTransaksjonene.forEach(function(d) {
    d["InvoiceDate"] = dateFormat.parse(d["InvoiceDate"]);
    d["InvoiceDate"].setDate(1);
    d["TotalAmount"] = +d["TotalAmount"];
});

这会导致 Safari 控制台出现以下错误；

TypeError: undefined is not a function (evaluating 'salgsTransaksjonene.forEach')

最后一条信息； flask app.py 文件有一个

@app.route("/salgshisto")
def betHisto():
    ....
    creating FO = pandas.DataFrame object 
    ....

   return FO.to_json(orient='index', date_format='iso', date_unit='s', force_ascii=False)

此外，控制台显示一个对象，它是 .json 数据，我可以看到，因为我可以扩展对象的对象元素，并从 pandas Dataframe 中查看信息。所以;信息通过了，但看起来没有到达 makeGraphs 函数和 salgsTransaksjonene 选择器。

我只是不明白 typeError 是什么，所以如果有人知道，我将不胜感激!

编辑 2:

@Mark 谢谢你的回复!!我实现了 d3.json()你是这样提供的；

var salgsData = d3.json("/salgshisto", function(error, json) { if (error) return console.warn(error);}); 

function makeGraphs(salgsData) {.....

现在，Flask 服务器或 chrome/safari 控制台中都没有错误消息。所以代码现在似乎正在执行。但它的行为并不像预期的那样。其余代码没有返回我期望的结果 - 行图:

var salgsData = d3.json("/salgshisto", function(error, json) { if (error) return console.warn(error);}); 

function makeGraphs(salgsData) {

//  var salgsData = d3.json.loads("/salgshisto");

//klargjoer salgsData
var salgsTransaksjonene = salgsData;
var dateFormat = d3.time.format("%Y-%m-%dT%H:%M:%SZ");
salgsTransaksjonene.forEach(function(d) {
    d["InvoiceDate"] = dateFormat.parse(d["InvoiceDate"]);
    d["InvoiceDate"].setDate(1);
    d["TotalAmount"] = +d["TotalAmount"];
});

//Create a Crossfilter instance
var ndx = crossfilter(salgsTransaksjonene);

//Define Dimensions
var kundeDim = ndx.dimension(function(d) { return d["CustomerName"]; });
//var betingelseDim = ndx.dimension(function(d) { return d["Name"]; }); 

//Calculate metrics
var OmsetningKunder = kundeDim.group().reduceSum(function(fact) { return fact.TotalAmount;});

//Charts
var resourceTypeChart = dc.rowChart("#topp-20-row-chart");

resourceTypeChart
    .width(300)
    .height(600)
    .dimension(kundeDim)
    .group(OmsetningKunder)
    .xAxis().ticks(4);

dc.renderAll();

};

我可以从服务器日志中看到 "/salgshisto"正在被调用。

相应的bootstrap keen.io模板有正确的<div id="topp-20-row-chart"></div>添加。

关于 .json 数据。我想知道如何把它传送给你。我无法再在 javascript 控制台中获得相同的信息，布置对象。我想我能做的最好的就是复制在浏览器中运行“.../salgshisto”url 的响应。这将返回整个列表。唯一的问题是文本是 uff-8我无法将其打印为。所以这里是前两个条目，作为 unicode； {"0":{"InvoiceDate":"2011-04-04T00:00:00Z","CustomerName":"M\u0000e\u0000c\u0000h\u0000a\u0000n\u0000i\u0000c\u0000a\u0000 \u0000A\u0000S\u0000","Name":"Netto per 30 dager","TotalAmount":14689.74},"1":{"InvoiceDate":"2011-04-07T00:00:00Z","CustomerName":"H\u0000e\u0000l\u0000l\u0000a\u0000n\u0000d\u0000 \u0000M\u0000e\u0000k\u0000.\u0000 \u0000V\u0000e\u0000r\u0000k\u0000s\u0000t\u0000e\u0000d\u0000","Name":"Netto per 30 dager","TotalAmount":3705.0},...}

Answer 1

@Mark 非常感谢您的帮助。事实证明你是对的；这是格式错误的 .json。对于在我使用 pandas 之后出现的所有情况，请注意 .json 的正确方向，至少就 d3 和交叉过滤器而言； orient='records' 是正确的。不是orient='index'