在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：

@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" 。

相应的引导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\e\c\h\a\n\i\c\a\ \A\S\","Name":"Netto per 30 dager","TotalAmount":14689.74},"1":{"InvoiceDate":"2011-04-07T00:00:00Z","CustomerName":"H\e\l\l\a\n\d\ \M\e\k\.\ \V\e\r\k\s\t\e\d\","Name":"Netto per 30 dager","TotalAmount":3705.0},...}

Answer 1

@Mark非常感谢您的所有帮助。 原来你是对的。 格式错误的是.json。 对于使用熊猫的所有后续工作，请注意，.json的正确方向，至少在d3和交叉过滤器方面； orient='records'是正确的。 not orient='index'