d3js - 從linearScale刻度線生成自定義標籤

Question

在d3js中的簡單時間軸上，我像這樣生成了xAxis。

xScale = d3.scaleLinear() 
      .domain([0, 2500]) 
      .range([leftPad, width - rightPad]); 

var xAxis = d3.axisBottom(); 
xAxis.scale(xScale); 

我的域表示自時間軸開始以來的秒數，但是我想以格式顯示我的蜱。生成的字符串很簡單：

var seconds = 370; //for example 
var final_seconds = seconds % 60 
var minutes = (seconds - final_seconds)/60 
var tick_text = minutes.toString() + ":" + final_seconds.toString() 

我的問題是如何替換每個刻度下方D3從上面的代碼的計算機數值顯示的文本。

Answer 1

你必須把你的代碼中tickFormat：

.tickFormat(function(d){ 
    var seconds = d; 
    var final_seconds = seconds % 60 
    var minutes = (seconds - final_seconds)/60 
    var tick_text = minutes.toString() + ":" + final_seconds.toString(); 
    return tick_text; 
}); 

在這個片段中，您的域名（從0到2500秒）從0:00變爲40:00（實際上，41個和幾秒鐘）。點擊 「運行的代碼段」：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 500) 
 
    .attr("height", 200); 
 

 
xScale = d3.scaleLinear() 
 
    .domain([0, 2500]) 
 
    .range([20, 480]); 
 

 
var xAxis = d3.axisBottom(xScale) 
 
    .tickFormat(function(d){ 
 
     var seconds = d; 
 
var final_seconds = seconds % 60; 
 
var minutes = (seconds - final_seconds)/60; 
 
var tick_text = minutes.toString() + ":" + ("0" + final_seconds).slice(-2); 
 
     return tick_text; 
 
     }); 
 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0,100)") 
 
    .call(xAxis);

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

PS：讓0第二場演出了爲00，我做你的代碼略有變化，改變final_seconds這樣：

("0" + final_seconds).slice(-2)