Estoy tratando de generar un mapa de árbol para algunos datos usando la biblioteca treemap-squarify. Todo funciona como debería, excepto cuando trato de colocar texto encima de cada rectángulo, el texto no se muestra. Sin embargo, si copio/pego la salida SVG generada en el cuerpo html y lo abro en el navegador, el texto se muestra bien. ¿Qué estoy haciendo mal? Gracias
<html> <head> <style> #something{ width: 750px; } </style> </head> <body> <div id="something"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" preserveAspectRatio="xMinYMin meet"> </svg> </div> <script type="text/javascript" src="https://unpkg.com/treemap-squarify@1.0.1/lib/bundle.min.js"></script> <script> const result = Treemap.getTreemap({ data: [ { value: 18, color: 'red' }, { value: 7, color: 'pink' }, { value: 4, color: 'blue' }, { value: 1, color: 'orange' }, { value: 5, color: 'green' }, { value: 9, color: 'grey' }, ], width: 900, height: 600, }); console.log(result); // lets create some SVG const svg = document.querySelector("svg"); for(let i = 0; i < result.length; i++){ // create group let newG = document.createElementNS("http://www.w3.org/2000/svg", "g"); // create rectangle let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", result[i].x); rect.setAttribute("y", result[i].y); rect.setAttribute("width", result[i].width); rect.setAttribute("height", result[i].height); rect.setAttribute("fill", result[i].data.color); // create text node let text = document.createElement("text"); text.setAttribute("x", result[i].x+(result[i].width/2)); text.setAttribute("y", result[i].y+(result[i].height/2)); text.setAttribute("fill", "white"); text.setAttribute("font-family", "Verdana"); text.setAttribute("font-size", "12"); let textNode = document.createTextNode(result[i].data.value); text.appendChild(textNode); newG.appendChild(rect); newG.appendChild(text); svg.appendChild(newG); } </script> </body> </html>Al igual que con g y rect , también necesita usar createElementNS para text .
const result = Treemap.getTreemap({ data: [{ value: 18, color: 'red' }, { value: 7, color: 'pink' }, { value: 4, color: 'blue' }, { value: 1, color: 'orange' }, { value: 5, color: 'green' }, { value: 9, color: 'grey' }, ], width: 900, height: 600, }); console.log(result); // lets create some SVG const svg = document.querySelector("svg"); for (let i = 0; i < result.length; i++) { // create group let newG = document.createElementNS("http://www.w3.org/2000/svg", "g"); // create rectangle let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", result[i].x); rect.setAttribute("y", result[i].y); rect.setAttribute("width", result[i].width); rect.setAttribute("height", result[i].height); rect.setAttribute("fill", result[i].data.color); // create text node // Change here to createElementNS let text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", result[i].x + (result[i].width / 2)); text.setAttribute("y", result[i].y + (result[i].height / 2)); text.setAttribute("fill", "white"); text.setAttribute("font-family", "Verdana"); text.setAttribute("font-size", "12"); let textNode = document.createTextNode(result[i].data.value); text.appendChild(textNode); newG.appendChild(rect); newG.appendChild(text); svg.appendChild(newG); } #something { width: 750px; } <script src="https://unpkg.com/treemap-squarify@1.0.1/lib/bundle.min.js"></script> <div id="something"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" preserveAspectRatio="xMinYMin meet"> </svg> </div>