帶有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行，不呈現

回答

相關問題