Question

在工作中我得到了一份非常简单的报告。事实上，如此荒谬简单，我决定提高难度等级，并在烧瓶服务器上使用dc.js制作交互式图表报告。这里的踢球者是我从未接触过Flask，dc.js，d3，crossfilter或javascript ......（是的;愚蠢的是，愚蠢的）

让我为它做的是一个tutorial，它把所有东西都放在一边，这是可以理解的，也是诱人的。

所以现在我在这里，由于时间压力而大汗淋漓，试图将大熊猫背面产生的数据转移到前端。本教程的代码如下：

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 keen.io模板添加了正确的<div id="topp-20-row-chart"></div>。

关于.json数据。我想知道如何将它传递给你。我无法在javascript控制台中获得相同的信息，布置对象。我能做的最好的事情就是在浏览器中复制运行“... / salgshisto”网址的响应。这将返回整个列表。那么唯一的问题是文本是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形成错误的。对于我使用熊猫之后的所有事情，请注意.json的正确方向，至少就d3和交叉过滤而言; orient='records'是正确的。不是orient='index'

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

1 个答案: