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)