Javascript d3-绘制圆形表示音频剪辑频率与时间的关系时出现问题

我是d3的新手，我正在做一个项目，这个项目包括接收一个音频剪辑，并在一个图表中绘制频率/音高与时间的关系。我想用圆圈表示数据点

x轴是时间，y轴是给定时间x的俯仰。每个圆的半径将与给定时间x的剪辑体积相关

我的第一个问题是-我如何反复提取这些音高数据？我如何找到要绘制的平均/代表性“音高”？据我所知，frequencyBinCount提供了整个频率范围，并为每个频率提供了0-255之间的值。但我只需要“代表性”频率

我的第二个问题是-如果我想在播放剪辑时按顺序显示每个点，我将如何实现这一点？每次我如何循环？下面是我的代码-我知道可能有一些突出的问题，但我只是从d3开始。基本代码已从修改

伪代码：

1.导入音频分析器

启动音频

每秒循环一次： -获取此时正在播放的当前音频的音调和音量（当前时间）。
-在高度处绘制圆=俯仰，x_位置=当前时间

音频结束后，停止绘制

var audioElement=document.getElementById（'audioElement'）；
var audioCtx=new（window.AudioContext | | window.webkitadiocontext）（）；
var audioSrc=audioCtx.createMediaElementSource（audioElement）；
var Analyzer=audioCtx.createAnalyzer（）；
音频SRC.连接（分析仪）；
audioSrc.connect（audioCtx.destination）；
var bufferSize=分析仪频率BINCOUNT
var frequencyData=新的Uint8Array（缓冲区大小）；
分析仪。GetByTefFrequencyData（频率数据）；
var timeDomainData=新的Uint8Array（bufferSize）；
Analyzer.getByteTimeDomainData（timeDomainData）；
//返回平均频率
var合计=0；
对于（var i=0；i

我听到你想做什么了。看起来可行，d3是个不错的选择。但是你问的第一个问题是什么？@Laizer啊，是的，我忘了把第一个问题加进去。我现在已经这么做了！我刚刚意识到使用“drawchart”函数可能是个坏主意，因为它重写了以前的画布。我如何反复循环“printcircle”函数…？我听到了你想做什么。看起来可行，d3是个不错的选择。但是你问的第一个问题是什么？@Laizer啊，是的，我忘了把第一个问题加进去。我现在已经这么做了！我刚刚意识到使用“drawchart”函数可能是个坏主意，因为它重写了以前的画布。如何重复循环“printcircle”函数。。。？