更新
好的，我已经考虑了Andrew Reid的建议并修改了HTML / D3js代码（见下文），但我仍然得到和以前一样的错误; Unexpected value translate(903,NaN) parsing transform attribute ...
这可能是一个缓存问题......我会调查......
<script>
// Importing the data from Flask end-point into the html template
const graphData = {{ data.temp_data | safe }}
console.log(graphData);
// Set dimensions of SVG object:
const margin = { top: 30, right: 50, bottom: 30, left: 50 };
const svgWidth = 1000;
const svgHeight = 600;
// Center the D3-figure wihin the SVG element
const figWidth = svgWidth - margin.left - margin.right;
const figHeight = svgHeight - margin.top - margin.bottom;
// Parsing the datetime column:
const parseDate = d3.time.format('%Y-%m-%d %H:%M:%S').parse;
// Setting the figures' axes ranges:
const x = d3.time.scale().range([0, figWidth]);
const y = d3.scale.linear().range([figHeight, 0]);
// Defining the axes:
const xAxis = d3.svg.axis().scale(x)
.orient('bottom').ticks(5);
const yAxis = d3.svg.axis().scale(y)
.orient('left').ticks(5);
// Defining the Forecast temperature data:
const forecastLine = d3.svg.line()
.defined((d) => { return d; })
.x((d) => { return x(d.date); })
.y((d) => { return y(d.forecast); });
// Defining the historical Hindcast temperature data:
const hindcastLine = d3.svg.line()
.defined((d) => {return d; })
.x((d) => { return x(d.date); })
.y((d) => { return y(d.hindcast); });
// Adding the SVG canvas:
const svg = d3.select('#graphDiv')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Defining plot/draw function:
const plot = (data) => {
data.forEach((d) => {
d.date = parseDate(d.date);
d.forecast = +d.forecast;
d.hindcast = +d.hindcast;
});
// Scale the data's range:
x.domain(d3.extent(data, (d) => { return d.date; }));
y.domain([
d3.min(data, (d) => {
return Math.min(d.forecast, d.hindcast);
}),
d3.max(data, (d) => {
return Math.max(d.forecast, d.hindcast)
})
]);
// Adding the X-Axis:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + figHeight + ')')
.call(xAxis);
// Adding the Y-Axis:
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
// Adding forecast & hindcast temperature data:
// a. Forecast data:
svg.append('path')
.style('stroke', 'green')
.style('fill', 'none')
.attr('class', 'line')
.attr('d', forecastLine(data));
// b. Hindcast (historical) data:
svg.append('path')
.style('stroke', 'steelblue')
.style('fill', 'none')
.style('stroke-dasharray', ('3, 3'))
.attr('d', hindcastLine(data));
// Text:
// a. Forecast temperature:
svg.append('text')
.attr('transform', 'translate(' + (figWidth + 3) + ',' + y(graphData[0].forecast) + ')')
.attr('dy', '0.35em')
.attr('text-anchor', 'start')
.style('fill', 'green')
.text('Forecast Temp');
// b. Hindcast historical temperature:
svg.append('text')
.attr('transform', 'translate(' + (figWidth + 3) + ',' + y(graphData[0].hindcast) + ')')
.attr('dy', '0.35em')
.attr('fill', 'red')
.text('Historical Temp');
};
plot(graphData)
</script>
------
我已将一些温度数据传递到Flask终点，我想渲染 D3 （ d3.v3.js ）预测和 hindcast 温度数据的折线图。
数据以 Pandas DataFrame 排列，并导出为 .csv 文件。
运行Flask服务器时，
图轴＆＃39;和文本呈现，当涉及数据解析时，我收到以下消息， Unexpected value translate(903,NaN) parsing transform attribute.
我非常想解决此问题，以便成功呈现数据。 非常感谢您的帮助/建议！ 非常感谢提前!!!
------
Flask 服务器：
import json
import pandas as pd
import sys, os
import datetime as dt
from flask import Flask, render_template
sys.path.insert(0, '../')
import api_requests as api
app = Flask(__name__)
@app.route('/')
def index():
'''
Function to call when fetching the index endpoint.
'''
path2data = '~/Documents/node-projects/weather-app/python/flask-d3/data/'
fname = 'data.csv'
df = pd.read_csv(path2data + fname, sep = ',')
temp_data = df.to_dict(orient = 'records')
temp_data = json.dumps(temp_data, indent = 2)
data = { 'temp_data': temp_data }
return render_template('test.html', data = data)
if __name__ == '__main__':
app.run(port = 8080, debug = True)
------
和 HTML / D3.js
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Testing multi-line D3</title>
<style>
body {
font: 12px Arial;
}
path {
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: steelblue;
stroke-width: 2;
shape-rendering: crispEdges;
}
.area {
fill: #F0F8FF;
stroke-width: 0;
}
</style>
</head>
<body>
<h1>Testing multi-line with D3</h1>
<div id='graphDiv'></div>
<script type='text/javascript' src='https://d3js.org/d3.v3.min.js'></script>
<script>
// Importing the data from Flask end-point into the html template
const graphData = {{ data.temp_data | safe }}
console.log(graphData);
// Set dimensions of SVG object:
const margin = { top: 30, right: 50, bottom: 30, left: 50 };
const svgWidth = 1000;
const svgHeight = 600;
// Center the D3-figure wihin the SVG element
const figWidth = svgWidth - margin.left - margin.right;
const figHeight = svgHeight - margin.top - margin.bottom;
// Parsing the datetime column:
const parseDate = d3.time.format('%Y-%m-%d %H:%M:%S').parse;
// Setting the figures' axes ranges:
const x = d3.time.scale().range([0, figWidth]);
const y = d3.scale.linear().range([figHeight, 0]);
// Defining the axes:
const xAxis = d3.svg.axis().scale(x)
.orient('bottom').ticks(5);
const yAxis = d3.svg.axis().scale(y)
.orient('left').ticks(5);
// Defining the Forecast temperature data:
const forecastLine = d3.svg.line()
.x((d) => { return x(d.date); })
.y((d) => { return y(d.forecast); });
// Defining the historical Hindcast temperature data:
const hindcastLine = d3.svg.line()
.x((d) => { return x(d.date); });
// Adding the SVG canvas:
const svg = d3.select('#graphDiv')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Defining plot/draw function:
const plot = (data) => {
data.forEach((d) => {
d.date = parseDate(d.date);
d.forecast = +d.forecast;
});
// Scale the data's range:
x.domain(d3.extent(data, (d) => { return d.Date; }));
y.domain([
d3.min(data, (d) => {
return Math.min(d.forecast, d.Hindcast);
}),
d3.max(data, (d) => {
return Math.max(d.forecast, d.hindcast)
})
]);
// Adding the X-Axis:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + figHeight + ')')
.call(xAxis);
// Adding the Y-Axis:
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
// Adding forecast & hindcast temperature data:
// a. Forecast data:
svg.append('path')
.style('stroke', 'green')
.style('fill', 'none')
.attr('class', 'line')
.attr('d', forecastLine(data));
// b. Hindcast (historical) data:
svg.append('path')
.style('stroke', 'steelblue')
.style('fill', 'none')
.style('stroke-dasharray', ('3, 3'))
.attr('d', hindcastLine(data));
// Text:
// a. Forecast temperature:
svg.append('text')
.attr('transform', 'translate(' + (figWidth + 3) + ',' + y(graphData[0].forecast) + ')')
.attr('dy', '0.35em')
.attr('text-anchor', 'start')
.style('fill', 'green')
.text('Forecast Temp');
// b. Hindcast historical temperature:
svg.append('text')
.attr('transform', 'translate(' + (figWidth + 3) + ',' + y(graphData[0].hindcast) + ')')
.attr('dy', '0.35em')
.attr('fill', 'red')
.text('Historical Temp');
};
plot(graphData)
</script>
</body>
</html>
------
和数据本身：
forecast,hindcast,date
,46.93,2018-04-06 00:00:00
,46.85,2018-04-06 01:00:00
,47.13,2018-04-06 02:00:00
,47.03,2018-04-06 03:00:00
,46.77,2018-04-06 04:00:00
,46.98,2018-04-06 05:00:00
,46.79,2018-04-06 06:00:00
51.44,,2018-04-07 00:00:00
50.72,,2018-04-07 01:00:00
50.05,,2018-04-07 02:00:00
49.38,,2018-04-07 03:00:00
48.82,,2018-04-07 04:00:00
48.33,,2018-04-07 05:00:00
48.08,,2018-04-07 06:00:00
47.84,,2018-04-07 07:00:00
47.88,,2018-04-07 08:00:00
48.11,,2018-04-07 09:00:00
48.6,,2018-04-07 10:00:00