如何改變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）。

記住：域指的是輸入值，而範圍是指輸出位置。