我正在嘗試使用 js Map 設定 svg 矩形的基準，但它不起作用。我認為“d.key”是錯誤的，但不確定。我希望地圖鍵成為此時的資料。我沒有收到任何錯誤，只是沒有創建它們。
資料：
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())));
編輯：也不作業。不會在 id 為 demo1 的 svg 上創建任何矩形。我知道他們會在這一點上重疊。在 chrome 開發工具中懸停在 d 上也沒有顯示任何內容。資料可用代碼：
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')
}
...
我也試過這個：
.data(d3.keys(data))
但是當我進入那個 d3 函式時，它也無法識別它們。
uj5u.com熱心網友回復：
您可以使用data(music)或從以下示例中data(music, d => d)提取資料。Map
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>在data.js 的源代碼中，有一個呼叫的函式arraylike將從 a 回傳一個陣列Map，Array.from(Map)其中（我假設）是這里起作用的。你可以看到一個簡單的Array.from(music)：
顯示代碼片段
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; }轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419921.html
標籤：