Блог

Я использую d3 для создания визуализации формы волны. У меня это выглядит великолепно, но в моих попытках спроектировать эту форму волны я не обратил внимания на то, чтобы сделать это оптимизированным способом; я просто пытался заставить это работать.

 setInterval(function() {
  if (refresh) waveform();
  if (palette_refresh) {
    palette_refresh = false;
    updateColorPalette();
  }
}, options.refresh_rate);

function waveform() {
  analyser.getByteFrequencyData(fd);
  document.getElementById('wf_box').innerHTML = "";

  var data = ... irrelevant implementation details ...

  var chart = d3.select("#wf_box").append("svg")
    .attr("class", "chart")
    .attr("width", ""   percent_offset   "%")
    .attr("style", "padding-left:"   (100 - percent_offset)   "%;")
    .attr("viewBox", "0 0 "   Math.max(w * data.length, 0)   " "   Math.max(h, 0));

  chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d, i) {
      var x_offset = x(i) - Math.max(w * max / 900 - 0.25, 0.1) / 2;
      return x_offset;
    })
    .attr("y", function(d, i) {
      var height = y(d * options.bar_height) / h;
      return h - Math.pow(Math.max(height, 0.01), 1.5);
    })
    .attr("width", function(d) {
      return '1px';
    })
    .attr("height", function(d, i) {
      var height = y(d * options.bar_height) / h;
      return Math.pow(Math.max(height, 0.01), 1.5)   options.bar_y_offset;
    });
}
  

Как вы можете видеть, я неоднократно вызываю функцию формы сигнала, используя options.refresh_rate в качестве моей скорости. Я бы предположил, что существует более эффективный способ обновления данных, используемых в моей форме сигнала, чем удаление формы сигнала из DOM и перерисовка его в каждом кадре. У кого-нибудь есть представление о том, как я могу это сделать?

Спасибо!

Взгляните на шаблон ввода / выхода / обновления в d3 https://bl.ocks.org/mbostock/3808218 и посмотрите, может ли это дать вам подсказку.