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

Question

在工作中，我得到了一个很简单的报告。事实上，非常简单，以至于我决定在一个烧瓶服务器上使用dc.js提高难度等级，并将其变成一个交互式图表报告。这里的关键是，我从来没有接触过水瓶，dc.js，d3，交叉过滤器，或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')

最后一个信息:烧瓶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数据，我可以看到，因为我可以扩展对象的对象元素，并查看来自熊猫数据中心的信息。因此，信息使它跨越，但它看起来不像它得到的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"正在被调用。

相应的引导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

@马克，非常感谢你的帮助。事实证明你是对的，.json是畸形的。在我使用熊猫之后，请注意.json的正确方向，至少就d3和交叉过滤器而言，orient='records'是正确的。不是orient='index'