Ось с логарифмической шкалой, как включить галочку для 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. Мне еще предстоит выяснить, как приспособить построение графиков значений 0, обходя каким-либо образом лог-склейл. Но перед этим мне нужно отметить тик 0 на оси.

Answer 1

Вместо обычного масштаба журнала (d3.scaleLog()) используйте шкалу symlog (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>