如何改变D3轴的尺寸？

Question

一个阵营框架内工作，我有一个JSON数据集的权重，我试图显示在使用D3.js，其中左端为min的简单的数字线，右端为最大，并且特定个人体重是红色的勾号。

我已经编写了一个解决方案来创建这个，但是我不能为我的生活弄清楚如何使它变大。下面的代码，其中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); 

你必须根据你的SVG你想要的位置来设定range。例如，没有任何填充，如果你的SVG有500像素的宽度：

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

所以，那张范围从左边界（X = 0）到右边界（X = 500）。

记住：域指的是输入值，而范围是指输出位置。