Reference: Drag SVG: https://observablehq.com/d/68afc6dedb39f9e4 https://bl.ocks.org/mbostock/2b534b091d80a8de39219dd076b316cd http://jsfiddle.net/mdml/da37B/

Webaudiox API:https://github.com/jeromeetienne/webaudiox

Draw Line Between Circles: https://observablehq.com/@harrylove/draw-lines-between-circles-nodes-using-d3-links

Draw an arrow between circles

Circle Pack: https://observablehq.com/@eesur/d3-enclosing-diagram-circle-pack https://observablehq.com/@d3/zoomable-circle-packing https://observablehq.com/@d3/circle-packing https://d3-wiki.readthedocs.io/zh_CN/master/Pack-Layout/ https://bl.ocks.org/denjn5/6d5ddd4226506d644bb20062fc60b53f https://strongriley.github.io/d3/ex/pack.html

jquery-3.4.1.min.js以及webaudiox.js为引用JS库

目前已实现的功能： 1、通过点击圆播放每一个声音，拖过按下键盘上的Q键，可暂停播放声音 2、选择图例强调某类声音 3、放大缩小以及左右拖动画面 4、鼠标悬浮在某个声音上，会显示其名字 5、遇到重叠的圆，可以通过鼠标拖拽圆，若需圆恢复原位，再次长按圆即可恢复

待实现功能： 1、当悬浮在某个声音上时，展示其叠层关系，比如当悬浮在Clap01.wav上时，Clap01Layer01.wav以及Clap01Layer02.wav会通过CirclePack的方式聚拢到Clap01.wav，表明Clap01Layer01.wav以及Clap01Layer02.wav是Clap01.wav的叠层。此时高亮强调这三个声音，降低其他声音圆的透明度，通过键盘的1（Clap02.wav）,2（Clap03.wav）,3,4,5,6,7,8等来播放其叠层声音，或者直接通过HOVER播放。 2、为CirclePack设计新的Json文件