[英]Using a Javascript Map as data in D3
我正在嘗試使用 js Map 設置 svg 矩形的基准,但它不起作用。 我認為“d.key”是錯誤的,但不確定。 我希望 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"});
localStorage.setItem("testMusic",JSON.stringify(Array.from(music.entries())));
代碼(部分):
let data = new Map(JSON.parse(localStorage.testMusic));
//let data = localStorage.getItem("testMusic");
d3.select("#demo1")
.selectAll("rect")
.data(data,function(d) { return d.key})
.enter()
.append('rect')
...
我也試過這個:
.data(d3.keys(data))
但是當我走進那個 d3 function 時,它也沒有認出它們。
您可以使用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
的 function ,它將從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; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.