Javascript d3更新多个音频图形

我正在尝试用音频数据更新多个图表。我设法让一个工作，但我只是不知道如何添加另一个面积图也在更新（即使是相同的数据）。如果我再添加一个，它将保持不变（没有数据更新）

“严格使用”；
$（文档）.ready（函数（）{
var audioCtx=new（window.AudioContext | | window.webkitadiocontext）（）；
var audioElement=document.getElementById（'audioElement'）；
var audioSrc=audioCtx.createMediaElementSource（audioElement）；
var Analyzer=audioCtx.createAnalyzer（）；
//将分析器绑定到媒体元素源。
音频SRC.连接（分析仪）；
audioSrc.connect（audioCtx.destination）；
//var frequencyData=新的UINT8阵列（分析仪频率B计数）；
var-samplesLayer=200；
var frequencyData=新的UINT8阵列（200）；
audioElement.muted=false；
var svgHeight='300'；
var svgWidth='800'；
var barPadding='1'；
var frequencyData2=频率数据；
var arred=频率数据；
var阵列0=新的UINT8阵列（20）；
var阵列1=新的UINT8阵列（20）；
var array2=新的UINT8阵列（20）；
var阵列3=新的UINT8阵列（20）；
var阵列4=新的UINT8阵列（20）；
var阵列5=新的UINT8阵列（20）；
var阵列6=新的UINT8阵列（20）；
var阵列7=新的UINT8阵列（20）；
var阵列8=新的UINT8阵列（20）；
var阵列9=新的UINT8阵列（20）；
var n=1，//层数//每层的样本数
stack=d3.layout.stack（）.offset（'0'），
layer=stack（d3.range（n.map）（函数（）{return generateData（samplesLayer）；}））；
可变宽度=800，
高度=400；
var x=d3.scale.linear（）
.domain（[0，samplesLayer-1]）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.domain（[0，2000]）
.范围（[高度，0]）；
var color=d3.scale.linear（）
.range（['#fff'，'#fff']）；
//配音
var area=d3.svg.area（）
.x（函数（d）{返回x（d.x）；}）
.y0（函数（d）{返回y（0）；}）
.y1（函数（d）{返回y（d.y0+d.y）；}）；
var svg=d3。选择（“#图表容器”）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
svg.selectAll（'path'）
.数据（阵列6）
.enter（）.append（'path'）
.attr（'d'，区域）
.style（'笔划'，'黑色'）
.style（'stroke-width'，'4'）
.style（'fill'，'none'）；
控制台日志（array9）；
函数转换（）{
d3.选择全部（“路径”）
.数据（函数（）{
var d=层；
层=层；
返回层=d；
})
.transition（）
.持续时间（100）
.attr（'d'，区域）；
}
;
函数updateGraphs（）{
layer=stack（d3.range（n.map）（函数（）{return generateData（samplesLayer）；}））；
过渡（）；
}
setTimeout（函数（）{
控制台日志（“第9层”）；
控制台日志（array9）；
}, 3000);
控制台日志（层）；
//创建侧边渐变
函数消息数据（a）{
var aZahler=数学功率（（a-（采样层/2）），6），
bZahler=0.01，
aNenner=数学表达式（10），
推进器=0.02，
术语=（aZahler*bZahler）/aNenner，
最终=数学表达式（-term）+推送器；
返回最终结果；
}
//将数据转换为拟合格式y/y0/x
函数生成数据（n）{
功能凹凸（a）{
对于（变量i=0；i  'use strict';
    $(document).ready(function() {

      var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      var audioElement = document.getElementById('audioElement');
      var audioSrc = audioCtx.createMediaElementSource(audioElement);
      var analyser = audioCtx.createAnalyser();

      // Bind our analyser to the media element source.
      audioSrc.connect(analyser);
      audioSrc.connect(audioCtx.destination);

      //var frequencyData = new Uint8Array(analyser.frequencyBinCount);
      var samplesLayer = 200;
      var frequencyData = new Uint8Array(200);
      audioElement.muted = false;
      var svgHeight = '300';
      var svgWidth = '800';
      var barPadding = '1';
      var frequencyData2 = frequencyData;

      var arred = frequencyData;
          var array0 = new Uint8Array(20);
          var array1 = new Uint8Array(20);
          var array2 = new Uint8Array(20);
          var array3 = new Uint8Array(20);
          var array4 = new Uint8Array(20);
          var array5 = new Uint8Array(20);
          var array6 = new Uint8Array(20);
          var array7 = new Uint8Array(20);
          var array8 = new Uint8Array(20);
          var array9 = new Uint8Array(20);

      var n = 1, // number of layers// number of samples per layer
          stack = d3.layout.stack().offset('zero'),
          layer = stack(d3.range(n).map(function() { return generateData(samplesLayer); }));

      var width = 800,
          height = 400;

      var x = d3.scale.linear()
          .domain([0, samplesLayer - 1])
          .range([0, width]);

      var y = d3.scale.linear()
          .domain([0, 2000])
          .range([height, 0]);

      var color = d3.scale.linear()
          .range(['#fff', '#fff']);

      // DUBL
      var area = d3.svg.area()
          .x(function(d) { return x(d.x); })
          .y0(function(d) { return y(0); })
          .y1(function(d) { return y(d.y0 + d.y); });

      var svg = d3.select('#chart-container')
          .append('svg')
          .attr('width', width)
          .attr('height', height);

      svg.selectAll('path')
          .data(array6)
          .enter().append('path')
          .attr('d', area)
          .style('stroke', 'black')
          .style('stroke-width', '4')
          .style('fill', 'none');

    console.log(array9);

      function transition() {
        d3.selectAll('path')
            .data(function() {
              var d = layer;
              layer = layer;
              return layer = d;
            })
            .transition()
              .duration(100)
              .attr('d', area);
      }

      ;

      function updateGraphs() {
        layer = stack(d3.range(n).map(function() { return generateData(samplesLayer); }));

        transition();
      }

      setTimeout(function() {
        console.log("layer9");
        console.log(array9);
      }, 3000);

      console.log(layer);

      // Create fade to sides
      function massageData(a) {
        var aZahler = Math.pow((a - (samplesLayer / 2)), 6),
            bZahler = 0.01,
            aNenner = Math.exp(10),
            pusher = 0.02,
            term = (aZahler * bZahler) / aNenner,
            final = Math.exp(-term) + pusher;
        return final;
      }

      // Transform data to fitting format y/y0/x
      function generateData(n) {
        function bump(a) {
          for (var i = 0; i < n; i++) {
            a[i] = frequencyData[i] * massageData(i);
          }
        }

        var a = [], i;
        for (i = 0; i < n; ++i) a[i] = 0;
        for (i = 0; i < 5; ++i) bump(a);
        return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
      }

      //
      function equate(a) {
        var aZahler = Math.pow((a - (10)), 6),
            bZahler = 0.01,
            aNenner = Math.exp(4),
            pusher = 0.02,
            term = (aZahler * bZahler) / aNenner,
            final = Math.exp(-term) + pusher;
        return final;
      }

      function generateNumbers(n, arr) {

        function bump(a) {
          for (var i = 0; i < n; i++) {
            a[i] = equate(a);
          }

          return a[i];
        }

        var a = [], i;
        for (i = 0; i < n; ++i) a[i] = 0;
        for (i = 0; i < n; ++i) bump(a);
        return a.map(function(d, i) { return {x: i, y: a[4]  }; });
      }

      // setInterval(function(){  console.log(" array9: ");
      //     console.log(arr); }, 3000);

      // Continuously loop and update chart with frequency data
      function renderChart() {
        requestAnimationFrame(renderChart);
        updateGraphs();

        // Copy frequency data to frequencyData array
        analyser.getByteFrequencyData(frequencyData);

        // // Update d3 chart with new data

        var graphNumber = 10;

        function split(a, n) {
          var len = a.length, out = [], i = 0;
          while (i < len) {
            var size = Math.ceil((len - i) / n--);
            out.push(a.slice(i, i + size));
            i += size;
          }

          return out;
        }

        var masterArray = split(frequencyData, graphNumber);


          var array0 = arraytransform(masterArray[0]);
          var array1 = arraytransform(masterArray[1]);
          var array2 = arraytransform(masterArray[2]);
          var array3 = arraytransform(masterArray[3]);
          var array4 = arraytransform(masterArray[4]);
          var array5 = arraytransform(masterArray[5]);
          var array6 = arraytransform(masterArray[6]);
          var array7 = arraytransform(masterArray[7]);
          var array8 = arraytransform(masterArray[9]);
          var array9 = arraytransform(masterArray[0]);

          console.log(array9[10])

      function arraytransform(arr) {
            var generated2 = $.map(arr, function(value, index) {
              var all = equate(index) * value;
              return { x: index, y: Math.round(all), y0: 0};
            });

            return generated2;
          }
      }

      // Run the loop
      renderChart();

});