具有对数刻度的轴，如何包括0的刻度？

Question

我需要在图形的y轴上具有对数刻度。由于对数刻度不能在域中包含0值，因此我将域的下限设为1。这导致轴上的刻度线从1开始。如何使刻度线从0开始？

var yScale_for_axis = d3.scaleLog().domain([1,d3.max(vals)]).range ([height,0]);    

g.append("g")
  .call(d3.axisLeft(yScale_for_axis).tickFormat( d3.format(".1e")))

我需要打勾0，因为我需要绘制的数据包括0。我还没有弄清楚如何通过绕过对数sclae来适应绘制0值。但在此之前，我需要在轴上表示0刻度。

Answer 1

代替常规对数刻度（d3.scaleLog()），请使用符号对数刻度（d3.scaleSymlog()），它在域中允许零。

这里是一个具有常规，对数刻度并且域中为零的演示（它将失败，将不会显示任何内容：]

const svg = d3.select("svg")
const scale = d3.scaleLog()
  .domain([0, 1000])
  .range([20, 480])
const axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"))

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="100"></svg>

现在与d3.scaleSymlog()使用相同的代码：

const svg = d3.select("svg")
const scale = d3.scaleSymlog()
  .domain([0, 1000])
  .range([20, 480])
const axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"))

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="100"></svg>