Различные размеры тика на оси Y графического графика D3js

Question

Я пока не нашел примеров этого, но я надеялся, что читатели в Stack столкнулись с этой ситуацией раньше.

У нас есть ось Y, где диапазон от 0-200 не очень интересный. Мы хотели бы «проглотить» эту область оси y и увеличить ширину зазора, поскольку значения оси Y растут так, что верхний конец спектра показывает намного больше движения на линейном графике.

Это означало бы, что тики по оси Y будут расти по мере их приближения и позволяют графику показывать большие различия вблизи верхнего конца спектра.

Я вижу, что Y не выполняет функцию, но кто-нибудь сделал что-то подобное, и если у кого-нибудь есть какие-либо рабочие примеры?

Если это не возможно с D3, кто-нибудь сделал что-то подобное с помощью высокоскоростных карт?

Answer 1

ПРИМЕЧАНИЕ

Пожалуйста, убедитесь, что идеи в графике все еще ясно, если вы используете такой масштаб. Имейте в виду, что линии построены только на основе начальной и конечной точки и не «перегибаются» при перемещении разрыва по оси. При написании ответа я не знал, что у вас есть график строки и значение ниже 200.

ОТВЕТ

Предполагая, что вы хотите использовать линейную шкалу, вы могли бы, например, попробуйте следующее:

newScale = d3.scale.linear().domain([0,200,1000]).range([0,100,1000]) 

Ось может быть, например, выглядеть следующим образом:

var xAxis = d3.svg.axis() 
    .scale(newScale) 
    .orient('bottom'); 
d3.select("#someSVG").append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0, " + 123 + ')') 
    .call(xAxis); 

Следовательно, вы получите:

Глядя на ваш codepen, вы можете попробовать:

var y = d3.scale.linear().range([height,height * 9/10, 0]); 

, а затем использовать в качестве домена :

y.domain([0, 200, d3.max(data, function (d) { 
     return d.close; 
    })]); 

поэтому в данном примере, вы размещаете 1/10th высоты к первому 200.