D3軸のサイズ変更方法は？

Question

Reactフレームワーク内で作業すると、JSONデータセットのウェイトがあり、D3.jsを使用して単純な数値の行に表示しようとしています。左端がmin、右端がmax、個体の体重は赤色の目盛りです。

私はこれを作成するソリューションをコーディングしましたが、私の人生にとっては、それをより大きくする方法を見つけ出すことはできません。

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'); 

このコードは、この結果を生成します：

誰てくださいすることができここでthis.state.range = [126.4、212.2]とthis.state.avg = 167は、コードは、です方法を教えてください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 = 500）に左の境界（X = 0）からなります。

注意：ドメインは入力値を参照し、範囲は出力位置を参照します。