繪製座標軸上方的刻度文本

我正在使用d3 v4繪製圖形。而目前x軸上的刻度文本正在軸下方。我想要在軸上方的文字。繪製座標軸上方的刻度文本

//Set the Xaxis scale Range 
     let x = scaleLinear().rangeRound([0, width]); 
     let x_axis = axisBottom(x); 

x.domain(extent(graphData, function (d) { 
      return d.weeks; 
     })); 

g.append("g").attr("transform", "translate(0," + height + ")").call(axisBottom(x).ticks(5)).attr("transform", "translate(0, 120)");

所以你可以幫助我如何把勾號文本放在X軸上方。

來源

2017-06-01 rajeev tejapuriya

如果您想要軸上的刻度，您應該使用axisTop而不是axisBottom。

的名字是很容易理解和API是很清楚的：

d3.axisTop（規模）：在這個方向上，蜱繪製以上水平極化路徑。

d3.axisBottom（scale）：在此方向上，繪製刻度線低於水平域路徑。（重點礦）

這裏是一個演示，第一軸線使用axisTop，以及第二個，下面，使用axisBottom：

var svg = d3.select("svg"); 
 
var x = d3.scaleLinear().range([20, 280]); 
 
var xAxisTop = d3.axisTop(x)(svg.append("g").attr("transform", "translate(0,50)")) 
 
var xAxisBottom = d3.axisBottom(x)(svg.append("g").attr("transform", "translate(0,100)"))

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>

來源

2017-06-01 07:08:16

繪製座標軸上方的刻度文本

回答

相關問題