d3js - 从linearScale ticks

Question

在d3js的简单时间轴上，我就像生成我的xAx一样。

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分钟和几秒钟）。点击＆＃34;运行代码段＆＃34;：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

PS：要将0秒显示为00，我对您的代码稍作修改，将final_seconds更改为：

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