如何改变D3轴的尺寸？

Question

在React框架内工作，我有一个权重的JSON数据集，我试图使用D3.js在一个简单的数字行上显示，其中左端是最小值，右端是最大值，以及特别是个体体重是红色的蜱。

我已经编写了一个解决方案来创建这个，但我不能为我的生活找出如何使它更大。这是代码，其中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宽度为500px，则不进行任何填充：

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

因此，范围从左边界（x = 0）到右边界（x = 500）。

请记住：domain是指输入值，而range是指输出位置。