使用 Javascript 地图作为 D3 中的数据

Question

我正在尝试使用 js 地图设置 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 上创建任何 rect。我知道他们此时会重叠。在 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 函数时，它也没有识别它们。

Answer 1

您可以使用 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>

在 source for data.js 中有一个名为 arraylike 的函数，它将 return 来自 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; }

使用 Javascript 地图作为 D3 中的数据

Using a Javascript Map as data in D3

javascript

d3.js