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)