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

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