0
118
VisualizaçõesPor qué D3 no está creando elementos svg
No estoy seguro de qué estoy haciendo mal, pero estoy tratando de crear un svg <rect> basado en datos. El código sigue
var x = []; for (var i = 0; i < 20; i++) { x.push(Math.floor(100 * Math.random())); }; const newData = x; const s1 = d3.select("svg") .selectAll("rect") .data(newData) .enter() .append("rect") .attr("width", (d, i) => { return d }) .attr("y", (d, i) => { return i * 50 }) .attr("x", 0) .attr("height", 40) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script> <body> <link rel="stylesheet" href="style.css"> </link> <script src="_d3.js"></script> <nav> <h1>Hello Reader</h1> <h2>Day1</h2> <p>Monday</p> <h2>Day2</h2> <p>Tuesday</p> <h2>Day3</h2> <p>Wednesday</p> <h2>Day4</h2> <p>Thursday</p> </nav> <main> <h1>Current Period</h1> <svg width="900" height="600"> </svg> <h1>YTD</h1> </main> </body> </html> Sin embargo, el código anterior no crea ningún rect mientras esperaba ver 20 rect s dentro
<svg width="900" height="600"> </svg>El código anterior devuelve esto
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Mueva su secuencia de comandos ( _d3.js ) justo antes de la etiqueta de cierre </body> . El d3.select("svg") debe devolver una selección vacía, porque su secuencia de comandos comienza a ejecutarse antes de que se procese <svg> , por lo que no hay svg para seleccionar. (Para obtener más información, consulte esta respuesta sobre dónde incluir las etiquetas de script)
var x = [] for (var i = 0; i < 20; i++) { x.push(Math.floor(100 * Math.random())) } const newData = x const s1 = d3 .select('svg') .selectAll('rect') .data(newData) .enter() .append('rect') .attr('width', (d, i) => { return d }) .attr('y', (d, i) => { return i * 50 }) .attr('x', 0) .attr('height', 40) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script> <body> <nav> <h1>Hello Reader</h1> <h2>Day1</h2> <p>Monday</p> <h2>Day2</h2> <p>Tuesday</p> <h2>Day3</h2> <p>Wednesday</p> <h2>Day4</h2> <p>Thursday</p> </nav> <main> <h1>Current Period</h1> <svg width="900" height="600"></svg> <h1>YTD</h1> </main> <script src="_d3.js"></script> </body> </html>
·
Juan Pablo Isaza
Relatório
Responde à pergunta