Как изменить размер оси D3?

Question

Работая в рамках React, у меня есть набор данных JSON весов, и я пытаюсь отобразить на простой числовой строке, используя D3.js, где левым концом является min, правый конец - max, а конкретный вес людей - это галочка с красным цветом.

Я закодировал решение, которое создает это, однако я не могу на всю жизнь понять, как сделать его более крупным. Вот код, где this.state.range = [126,4, 212,2] и this.state.avg = 167:

var svgContainer = d3.select("body").append("svg").attr("width",500).attr("height", 200); 
var axisScale = d3.scaleLinear().domain(this.state.range).range(this.state.range); 
var axisBot = d3.axisBottom(axisScale); 
var ticks = [this.state.range[0], this.state.range[1], this.state.avg, this.state.patient.weight]; 
axisBot.tickValues(ticks); 
var xAxisGroup = svgContainer.append("g").call(axisBot); 
d3.selectAll('g.tick').filter(function(d){ return d==186.4;}).select('line').style('stroke','red'); 

Этот код дает этот результат:

Может кто-нибудь пожалуйста скажите мне, как a) сделать эту цифровую линию более крупной и b) как центрировать линию?

Приносим извинения, если это немного исправно, однако это мой первый опыт работы с D3.js.

Answer 1

В своем коде, домен и диапазон совпадают (при условии, что this.state.range массив):

var axisScale = d3.scaleLinear() 
    .domain(this.state.range) 
    .range(this.state.range); 

Вы должны установить range в соответствии с положениями, которые вы хотите в вашем SVG. Например, без каких-либо дополнений, если SVG имеет ширину 500px:

var axisScale = d3.scaleLinear() 
    .domain(this.state.range) 
    .range([0, 500]); 

Таким образом, диапазон идет от левой границы (х = 0) к правой границе (х = 500).

Помните: домен относится к входным значениям, а диапазон относится к выходным позициям.