В D3 v4, как правильно совместить оси?

Question

Я использую D3 v4. У меня есть гистограмма, созданная с осью x с использованием scaleBand(). Теперь я создал ось y, но моя проблема заключается в том, что независимо от того, как я ее позиционирую, она разрезает фактические столбцы графика.

В верхней части моего файла JS, у меня есть:

ширина вар = 350; var height = 300;

Затем, та часть, где я на самом деле создать Y-ось:

var y = d3.scaleLinear() 
     .domain([0, 300000]) 
     .rangeRound([height, 0]); 

var yAxis = d3.axisRight(y); 
      yAxis.ticks(6); 

chart.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (width - dist_from_right) + ", 0)") 
    .call(yAxis); 

Как видно из рисунка, ось растягивает полноту высоты SVG, снизу вверх означает, что половина из 0 обрезается, а половина из 300 000 отключается.

Первый вопрос: как я «хлюпать» (или масштабировать) ось y, чтобы она отображалась в пределах SVG?

Далее, я хочу перевести ось y так, чтобы она не врезалась в мою красную полосу. Если я попытаюсь использовать атрибут transform, я могу нажать ось далеко справа от границ SVG, но это означает, что числа находятся за пределами границы SVG. Я также пытался увеличить переменную width, но это ничего не делает, поскольку она пропорционально растягивает ось x.

Второй вопрос: как перемещать ось y так, чтобы она не разрезала ось x и красную полосу, а также остается видимой в окне SVG?

Спасибо!

Answer 1

В D3 оси расположены в соответствии с range соответствующих шкал. Итак, вам нужна «прокладка» для диапазонов. Прямо сейчас, поскольку ваш диапазон идет от 0 до height (или наоборот, это не имеет значения), ось начинается в самом начале SVG и заканчивается в самом ее конце.

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

Во-первых, давайте установить Прокладки:

var paddingLeft = 10, paddingRight = 10, paddingTop = 10, paddingBottom = 10; 

Здесь 10 просто заданное число, изменить его соответствующим образом.

После этого установите диапазоны с помощью Прокладки:

var y = d3.scaleLinear() 
    .domain([0, 300000]) 
    .rangeRound([height - paddingBottom, paddingTop]); 

То же самое для х масштаба:

var x = d3.scaleLinear() 
    .domain([0, someValue]) 
    .rangeRound([paddingLeft, width - paddingRight]); 

Затем определяют ось:

var xAxis = d3.axisBottom(x);//the same for the y axis 

Having диапазоны с прокладками, вызовите настройку осей, что прокладки:

chart.append("g") 
.attr("class", "y axis") 
.attr("transform", "translate(" + (width - paddingRight) + ", 0)") 
.call(yAxis); 

И то же самое для оси х:

chart.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + (height - paddingBottom) + ")") 
.call(xAxis); 

Вот рабочий пример. Я сделал SVG светло-серым и область зарисовки белой, так что вы можете увидеть .: Прокладку

var paddingLeft = 20, paddingRight = 40, paddingTop = 10, paddingBottom = 40; 
 

 
var width = 300, height = 300; 
 

 
var chart = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 

 
chart.append("rect") 
 
    .attr("x", paddingLeft) 
 
    .attr("y", paddingTop) 
 
    .attr("width", width - paddingLeft - paddingRight) 
 
    .attr("height", height - paddingTop - paddingBottom) 
 
    .attr("fill", "white"); 
 

 
var y = d3.scaleLinear() 
 
    .domain([0, 100]) 
 
    .rangeRound([height - paddingBottom, paddingTop]); 
 

 
var x = d3.scaleLinear() 
 
    .domain([0, 100]) 
 
    .rangeRound([paddingLeft, width - paddingRight]); 
 

 
var yAxis = d3.axisRight(y); 
 

 
var xAxis = d3.axisBottom(x); 
 

 
chart.append("g") 
 
    .attr("class", "y axis") 
 
    .attr("transform", "translate(" + (width - paddingRight) + ", 0)") 
 
    .call(yAxis); 
 

 
chart.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + (height - paddingBottom) + ")") 
 
    .call(xAxis);

svg { 
 
    background-color: lightgray; 
 
    }

<script src="https://d3js.org/d3.v4.min.js"></script>