0
411
Vistasd3.timeParse() Issue with date, month & year
I'm trying to create x and y scales for eur/usd (y-axis) and time (x-axis). I have tried to modify my d3.timeParse() to get this to work but i'm having issues. I have also added an image example of what the JSON data looks like. I have tried to match the timeParse() inputs to the JSON date data but no luck. Any input appreciated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>D3.js</title>
<meta charset="UTF-8">
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript"></script>
<script>
$.getJSON("https://jsonblob.com/api/904557502042226688", function (data) {
console.log(data);
plotCurrencyData(data);
});
// Executed once file has downloaded
function plotCurrencyData(data){
// SVG
var margin = {top:50, right: 50, bottom: 50, left: 50},
width = 900 - margin.left - margin.right,
height = 670 - margin.top - margin.bottom;
// timeParse()
// var parseDate = d3.timeParse("%d/%m/%Y");
var parseDate = d3.timeParse("%d/%m/%Y");
var y = d3.scaleLinear()
.domain(d3.extent(data, function(d) {return d["GBP/EUR"]}))
.range([height, 0]);
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) {return parseDate(d["Date"]); }))
.range([0, width]);
}
</script>
</body>
</html>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Calculate the time range with reduce instead of using d3.extent:
const width = 300;
d3.json('https://jsonblob.com/api/904557502042226688')
.then(d => onLoad(d));
const onLoad = data => {
const range = data.reduce((r, d) => {
const time = d3.timeParse("%d/%m/%Y")(d.Date).getTime();
if (!r) return [time, time];
return [Math.min(time, r[0]), Math.max(time, r[1])];
}, null);
const xScale = d3.scaleTime()
.domain(range.map(t => new Date(t)))
.range([0, width]);
const xAxis = d3.axisBottom(xScale);
d3.select('svg')
.append('g')
.attr('transform', 'translate(50, 50)')
.call(xAxis);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='400' height='100' />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta