從CSV渲染D3數據
[英]Rendering D3 data from CSV
問題描述
這更像是對代碼審查的要求，但我不能為我的生活讓這個.csv數據正確地呈現為D3中的折線圖...
以下是我寫的代碼。
到目前為止，我只能渲染y軸和軸標題，但我似乎無法渲染數據。 也許我做錯了什么，但根本看不到它。
非常感謝幫助和建議。
JavaScript文件
// ./weather-app/d3/testing-dsky-d3.js
const fname_forecast = 'forecast-hourly-temp.csv';
const path2File = './csv/';
const parseDateTime = d3.timeParse('%Y-%m-%d %H:%M:%S');
d3.csv(path2File + fname_forecast)
.row((data) => {
return {
date: parseDateTime(data.datetime),
temp: +data.temperature
}
})
.get((err, data) => {
if (err) {
console.log('\nErrors!\n', err)
} else {
console.log(data);
const minDate = d3.min(data, (d) => { return d.date; });
const maxDate = d3.max(data, (d) => { return d.date; });
const minTemp = d3.min(data, (d) => { return d.temp; });
const maxTemp = d3.max(data, (d) => { return d.temp; });
const svg = d3.select('svg'),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr('width') - margin.left - margin.right,
height = +svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
const x = d3.scaleTime()
.rangeRound([minDate, maxDate])
.domain([minDate, maxDate]);
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([height, 0])
const line = d3.line()
.x((d) => { return x(d.date); })
.y((d) => { return y(d.temp); });
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x))
.select('.domain')
.remove();
g.append('g')
.call(d3.axisLeft(y))
.append('text')
.attr('fill', '#000')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('text-anchor', 'end')
.text('Temperature (degC)');
g.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr('d', line);
}
});
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test: Rendering DarkSky Data w/ D3</title>
<script type='text/javascript' src='./learn/d3.v4.js'></script>
</head>
<body>
<h1>Test: Rendering DarkSky API Temperature Data w/ <code>D3.js</code></h1>
<hr><br>
<div id='container'>
<svg width='960' height='500'></svg>
</div>
<script type='text/javascript' src='testing-dsky-d3.js'></script>
</body>
然后是一些示例.csv文件
datetime,temperature
2018-04-04 12:00:00,46.98
2018-04-04 13:00:00,48.43
2018-04-04 14:00:00,49.63
2018-04-04 15:00:00,49.85
2018-04-04 16:00:00,48.98
2018-04-04 17:00:00,47.95
2018-04-04 18:00:00,47.35
2018-04-04 19:00:00,47.08
2018-04-04 20:00:00,46.79
2018-04-04 21:00:00,46.62
1 個解決方案
解決方案1
2 已采納 2018-04-05 20:19:47
您需要正確設置比例的域和范圍，
這里：
const x = d3.scaleTime()
.rangeRound([minDate, maxDate])
.domain([minDate, maxDate]);
您正在設置一個比例，以將值從minDate取值到maxDate（域），並將它們映射到從minDate到maxDate（范圍）的值。 你需要修改這個：
const x = d3.scaleTime()
.rangeRound([0,width]) // values to map to (x coordinate values)
.domain([minDate, maxDate]); // extent of input values/values needing scaling
y軸相同：
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([height, 0])
您需要區分范圍和域。 上面的比例只是取0和height之間的值，並返回相同的值。
要修復圖表，您需要正確設置：
- 域到數據集中的輸入值范圍（臨時值，日期等）
- 范圍到輸出值的范圍，通常是x或y（或顏色，半徑等）的坐標值。
應用這些更改（我硬編碼[40,50]的溫度域）如下所示：
const x = d3.scaleTime()
.rangeRound([0,width])
.domain([minDate, maxDate]);
const y = d3.scaleLinear()
.domain([40, 50])
.rangeRound([height, 0])
除了使用你的代碼和數據，我得到：
來自 CSV 渲染的 D3 Sankey 圖不正確
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.