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

Question

在工作中，我被指派做一份非常简单的报告。事实上，这太简单了，以至于我决定提高难度评级，并在烧瓶服务器上使用dc.js制作一份交互式图表报告。这里的关键是，我从未接触过Flask、dc.js、d3、crossfilter或javascript。。。（是的；愚蠢是，愚蠢是）

让我选择它的是一个教程，它把一切都安排得如此容易理解和诱人。

所以现在我在这里，由于时间压力，我汗流浃背，试图从后台和熊猫一起获取数据，并将其转移到前端。教程中的代码如下所示；

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:

@马克，谢谢你的回复！！我像这样实现了您提供的d3.json()；

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

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

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控制台中获得相同的信息，布置对象。我想我能做的最好的事情就是复制浏览器中运行"…/salshisto"url的响应。这将返回整个列表。唯一的问题是文本是uff-8，我无法将其打印为；{"0":{"InvoiceDate":"2011-04-04T00:00:00Z","CustomerName":"Mu0000eu0000cu0000hu0000au0000nu0000iu0000cu0000au0000 u0000Au0000Su0000","Name":"Netto per 30 dager","TotalAmount":14689.74},"1":{"InvoiceDate":"2011-04-07T00:00:00Z","CustomerName":"Hu0000eu0000lu0000lu0000au0000nu0000du0000 u0000Mu0000eu0000ku0000.u0000 u0000Vu0000eu0000ru0000ku0000su0000tu0000eu0000du0000","Name":"Netto per 30 dager","TotalAmount":3705.0},...}

Answer 1

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