Estoy tratando de establecer el dato de los rectángulos svg usando un mapa js, pero no funciona. Creo que la "d.key" está mal pero no estoy seguro. Quiero que la clave del mapa sean los datos en este punto. No recibo ningún error, simplemente no los estoy creando.
Los datos:
const music = new Map(); music.set("2345",{str:"4",fret:"6"}); music.set("5478",{str:"5",fret:"2"}); music.set("4317",{str:"4",fret:"3"}); music.set("3455",{str:"5",fret:"12"}); localStorage.setItem("testMusic",JSON.stringify(Array.from(music.entries())));EDITAR: Tampoco funciona. No crea ningún rect en svg con id de demo1. Sé que se superpondrían en este punto. Además, pasar el cursor sobre d en las herramientas de desarrollo de Chrome no muestra nada. los datos están disponibles El código:
function createNoteRectOnStaff() { let data = new Map(JSON.parse(localStorage.testMusic)); d3.select("#demo1") .selectAll("rect") .data(data,d=>d) .enter() //.join("rect") .append("rect") //.attr('id',d=> d[0]) .attr('x', 30) .attr('y', 60) .attr('width', 30) .attr('height', 60) .attr('stroke', 'green') .attr('stroke-linecap', 'butt') .attr('stroke-width', '1') .attr('fill', 'black') }...
Intenté esto también:
.data(d3.keys(data))pero cuando entro en esa función d3, tampoco los reconoce.
Puede usar data(music) o data(music, d => d) y extraer datos del Map según el ejemplo a continuación.
const music = new Map(); music.set("2345",{str:"4",fret:"6"}); music.set("5478",{str:"5",fret:"2"}); music.set("4317",{str:"4",fret:"3"}); music.set("3455",{str:"5",fret:"12"}); d3.select("body") .selectAll(".item") .data(music, d => d) // or just .data(music) .enter() .append("p") .text(d => { const key = d[0]; const str = d[1].str; const fret = d[1].fret; return [key, str, fret].join(" : "); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script> En la fuente de data.js hay una función llamada arraylike que devolverá una matriz de un Map con Array.from(Map) que (supongo) es lo que está en juego aquí. Puedes ver un Array.from(music) simple:
const music = new Map(); music.set("2345",{str:"4",fret:"6"}); music.set("5478",{str:"5",fret:"2"}); music.set("4317",{str:"4",fret:"3"}); music.set("3455",{str:"5",fret:"12"}); console.log(Array.from(music)); .as-console-wrapper { max-height: 100% !important; top: 0; }