0
416
Visualizaçõesd3.timeParse() Problema con fecha, mes y año
Estoy tratando de crear escalas x e y para eur/usd (eje y) y tiempo (eje x). He intentado modificar mi d3.timeParse() para que esto funcione, pero tengo problemas. También he agregado una imagen de ejemplo de cómo se ven los datos JSON. Intenté hacer coincidir las entradas de timeParse() con los datos de fecha JSON, pero no tuve suerte. Cualquier entrada apreciada.
<!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 Respostas
Responde à pergunta0
Calcule el rango de tiempo con reduce en lugar de usar 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
Relatório
Responde à pergunta