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

最终结果看起来更令人愉快：