Estoy tratando de trazar un gráfico de varias líneas con d3.js pero recibo este error:
Error: atributo d: Comando esperado para mover a la ruta ('M' o 'm'), "función t(t){va…".
Estuve atascado en eso por un tiempo y probé todo lo que se me ocurrió, para ayudarlo en sus reflexiones. Encuentre el código que uso a continuación.
// set the dimensions and margins of the graph var margin = {top: 10, right: 30, bottom: 30, left: 60}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; const dateParser = d3.timeFormat("%Y-%m-%d %H:%M:%S"); data.forEach(function(d) { d.ts = dateParser(new Date(d.ts)); d.value = parseFloat(d.value) }); // append the svg object to the body of the page var svg = d3.select("#graph") .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 + ")"); //Read the data // group the data: I want to draw one line per group var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor .key(function(d) { return d.key;}) .entries(data); // Add X axis --> it is a date format var x = d3.scaleLinear() .domain(d3.extent(data, function(d) { return d.ts; })) .range([ 0, width ]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(5)); // Add Y axis var y = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return +d.value; })]) .range([ height, 0 ]); svg.append("g") .call(d3.axisLeft(y)); // color palette var res = sumstat.map(function(d){ return d.key }) // list of group names var color = d3.scaleOrdinal() .domain(res).range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999']) // Draw the line svg.selectAll(".line") .data(sumstat) .enter() .append("path") .attr("fill", "none") .attr("stroke", function(d){ return color(d.key) }) .attr("stroke-width", 1.5) .attr("d", function(d){ return d3.line() .x(function(d) { return x(d.ts); }) .y(function(d) { return y(d.value); }) })No puedo entender qué estoy haciendo mal, en caso de que el ejemplo que estoy viendo sea este enlace . Soy bastante nuevo en d3 y no es una biblioteca fácil de usar
Cuando establece el atributo d , devuelve el generador de línea en sí desde la función de enlace de datos, pero no puede ejecutarlo. Configurar el generador y ejecutarlo es un proceso de dos pasos:
primero, construye y configura el generador (la line es una función)
var line = d3.line() .x(function(d) { return x(d.ts); }) .y(function(d) { return y(d.value); }) luego, pase la función a attr() , por lo que se ejecutará como line(d)
svg.selectAll(".line") .data(sumstat) .enter() .append("path") .attr("fill", "none") .attr("stroke", function(d){ return color(d.key) }) .attr("stroke-width", 1.5) .attr("d", line)