带有JSON数据的D3行，不呈现

我有一个Flask webserver，它接收Python数据的字典，并在/data上调用GET时使用jsonify函数返回JSON对象。 JSON对象不是嵌套列表（请参阅下面的示例），就像这里的大多数其他示例一样。带有JSON数据的D3行，不呈现

我一直在试图把这个JSON数据传递给我的d3.svg.line()函数，但是看起来我传入的数据看起来有些问题。我的网页呈现轴线，但不显示任何线条。

检查元素显示x和y轴都填充了我的数据（<path class="domain" d="M0,6V0H890V6"></path>），但我的<path class="line"></path>为空。

我正在运行一个map函数来将我的日期和值转换为正确的格式并将它们作为数组返回。在此函数上运行console.log将显示有效的JSON对象的输出。

任何人都可以帮我解决我在哪里出错吗？我是否应该将我的json化对象重新格式化为嵌套列表，然后用forEach填充我的数据对象？

下面是我的代码和JSON示例：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { font: 12px Arial; } 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, .axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 

<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
    <script> 
     var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

     var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 

     var x = d3.time.scale().range([0,width]); 
     var y = d3.scale.linear().range([height,0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     var valueline = d3.svg.line() 
      .x(function(d) {return x(d.timeStamps); }) 
      .y(function(d) {return y(d.outTemps); }); 

     var svg = d3.select("body") 
      .append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", 
         "translate (" + margin.left + "," + margin.top + ")"); 

     d3.json("/data",function(error, data) { 
      function type(d) { 
      d.timeStamps = 
      d.timeStamps.map(function (time) {return formatDate(time) }); 
      d.outTemps = d.outTemps.map(function (temp) {return parseFloat(temp)}); 
     }; 
    x.domain(d3.extent(data, function (d) {return d.timeStamps})); 
    y.domain(d3.extent(data, function(d) { return d.outTemps; })); 


     svg.append("path") 
      .datum(data) 
      .append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 

     svg.append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 

     svg.append("g")  
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g")  
      .attr("class", "y axis") 
      .call(yAxis); 

     }); 



</script> 
</body> 


{ 
    "outTemps": [ 
    "79.7", 
    "79.7", 
    "79.8", 
    ], 
    "timeStamps": [ 
    "2016-09-20 19:15:07", 
    "2016-09-20 19:10:07", 
    "2016-09-20 19:05:11", 
    ]

来源

2016-09-20 prions

您的数据是在d3 ING一个奇怪的格式。 d3倾向于对象的数组，其中对象的每个属性表示一个x或y。所以，你的数据格式正确的应该是这个样子：

[{ 
    "timeStamps": "2016-09-20T23:15:07.000Z", 
    "outTemps": 79.7 
}, { 
    "timeStamps": "2016-09-20T23:10:07.000Z", 
    "outTemps": 79.7 
}, { 
    "timeStamps": "2016-09-20T23:05:11.000Z", 
    "outTemps": 79.8 
}]

而且，我的猜测是，你type功能是重新格式化数据的尝试，但你是不是连称这是...

最后，如果你只想重新格式化用JavaScript您的数据，它会是这个样子：

data = data.timeStamps.map(function(d, i) { 
    return { 
     timeStamps: formatDate(d), 
     outTemps: parseFloat(data.outTemps[i]) 
    } 
    });

随着该修正，here's your running code and plot。

来源

2016-09-21 00:41:49 Mark

非常感谢！我的数据格式根本不可接受，还是我处理它更多？你的功能工作得很好，但我相信我可以重新格式化我的Flask函数以返回正确的值。另外，我的type（）函数有多远，我应该在哪里调用它（以备将来参考）。 – prions

另外，你为什么叫时间戳地图而不是outTemps？ data = data.timeStamps.map（function（d，i） – prions

@prions，1.）你可以调用'type（data）;'，这会使数据保留在**相同的结构中**但强制' timeStamps'到日期和'outTemps'浮动。 2.）恕我直言，让烧瓶返回格式正确的数据更清洁。 3.）我可以使'''''timeStamps'或'outTemps'，只要它们是长度相同的数组就可以了。 – Mark

带有JSON数据的D3行，不呈现

回答

相关问题