Персонализированный диапазон осей

Question

У меня есть значения в таком диапазоне (от 400k до 600 миллионов)

And I would like to create a comprehensive y-axis on a D3 plot. If I use a log scale, all the variations in the huge numbers are erased, If I use a linearScale, all variations in the small numbers is also erased.

Therefore I thought of doing two-axis (one over the other like in the picture below) but I don't know if there is a simpler way. Can I specify all the tick values to get an axis where all the variations would be visible?

Thank you.

введите описание изображения здесь

Answer 1

Используйте обычную линейную шкалу с более чем двумя значениями как в домене, так и в диапазоне, создавая таким образом масштаб кусочно .

Например:

const scale = d3.scaleLinear()
    .domain([0, 5e7, 1e8, 6e8])
    .range([h-10, h/2 + 10, h/2 - 10, 10]);

Вот рабочий код:

const svg = d3.select("svg");
const h = 600;
const scale = d3.scaleLinear()
  .domain([0, 5e7, 1e8, 6e8])
  .range([h - 10, h / 2 + 10, h / 2 - 10, 10]);
const axis = d3.axisLeft(scale).tickValues(scale.ticks().concat(d3.range(0, 5e7, 5e6)))(svg.append("g").attr("transform", "translate(100,0)"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200", height="600"></svg>

Не забудьте убедиться, что пользователь понимает, что ось y усечена , желательно с четкой аннотацией, показывающей это.