Javascript d3js-从linearScale刻度生成自定义标签

在d3js中的一个简单时间轴上，我像这样生成我的xAxis

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

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

My domain表示时间线开始后的秒数，但我希望以：格式显示刻度。生成该字符串非常简单：

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中每个勾号下方显示的文本。

您必须将代码放入

勾号格式中：

.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.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，200）；
xScale=d3.scaleLinear（）
.domain（[0，2500]）
.范围（[20480]）；
var xAxis=d3.axisBottom（xScale）
.d格式（函数（d）{
var秒=d；
var final_秒=秒%60；
var分钟=（秒-最终秒）/60；
var tick_text=minutes.toString（）+“：”+（“0”+最后的_秒）。切片（-2）；
返回勾选文本；
});
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“翻译（0100）”）
.呼叫（xAxis）