Tengo este archivo json :
[ { "id": "1", "name": "Hello world", "shape": "rect", "fill": "pink" } ] Y también tengo este archivo javascript :
const svg = d3.select('svg') var stringToHTML = function (str) { var parser = new DOMParser(); var doc = parser.parseFromString(str, 'text/html'); return doc.body; }; d3.json("tree.json").then(data => { const elements = svg.selectAll('*') .data(data); elements.enter() .append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 100) .attr("height", 100) .attr("fill", d => d.fill) elements.enter() .append('text') .attr("x", 50) .attr("y", 60) .html("text", d => {d.name}) }) y este archivo html :
<!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> <body> <svg width="600" height="600"> </svg> <script src="https://d3js.org/d3.v7.min.js"></script> <script src="index.js"></script> </body> </html>Ahora la salida es:
pero cuando cambio "rect" con d => d.shape no se comporta como antes.
d3.json("tree.json").then(data => { const elements = svg.selectAll('*') .data(data); elements.enter() .append(d => d.) .attr("x", 20) .attr("y", 20) .attr("width", 100) .attr("height", 100) .attr("fill", d => d.fill) Pero, ¿en qué se diferencia del anterior? También intenté d.shape , e imprime una string . Entonces, ¿cómo puedo hacer algo que cree una forma de acuerdo con los datos de la forma?