Шкала лога на D3.js

Question

Я пытаюсь использовать шкалу, чтобы нарисовать звуковую форму волны.Линейная шкала слишком «динамична», и я бы хотел применить сжатие к пикам.Я думал о шкале логарифма, хотя я действительно не знаю, как использовать его в D3.

Линейный масштаб:

      // Scale for time
      xScale = d3.scaleLinear()
                .domain([0,samples_length]).range([0,width]);

      // Scale for samples
      yScale = d3.scaleLinear()
                .domain([-1,0,1]).range([0,height]);

      let area = d3.area()
                  .x(function(d, i){return xScale(i)})
                  .y0(function(d){return yScale(d); })
                  .y1(function(d){return height-yScale(d); });

      let waveform = d3.select("#waveform")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);

      waveform.append("path")
              .attr("d", area(samples))
              .attr("fill", "steelblue");

Линейная шкала дает мне:

И я хотел бы что-то более похожееэто:

Я также попробовал шкалу Symlog:

      // Scale for time
      xScale = d3.scaleSymlog()
                .domain([0,samples_length]).range([0,width]);

      // Scale for samples
      yScale = d3.scaleSymlog()
                .domain([-1,0,1]).range([0,height]);

      let area = d3.area()
                  .x(function(d, i){return xScale(i)})
                  .y0(function(d){return yScale(d); })
                  .y1(function(d){return height-yScale(d); });

      let waveform = d3.select("#waveform")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);

      waveform.append("path")
              .attr("d", area(samples))
              .attr("fill", "steelblue");
    }

И Symlog дает мне:

Любое предложение?

Answer 1

Мне удалось исправить динамический график, просто уменьшив масштаб шкалы:

      // Scale for samples
      yScale = d3.scaleSymlog()
                .domain([-1,0,1])
                .range([0,height/4])
                .constant(-1);

Конечный результат выглядит более приятным: