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

Question

在工作中，我接到了一份非常简单的报告。事实上，它非常简单，以至于我决定提高难度等级，并在烧瓶服务器上使用 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')

还有最后一条信息；烧瓶 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 控制台中都没有错误消息。所以代码似乎现在正在执行。但它的行为并不像预期的那样。其余代码没有返回我所期望的 - 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 quiet.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'