1

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

  '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();

});
4

0 回答 0