La función time.tickFormat() en D3.js se usa para devolver una función de formato de tiempo adecuada para mostrar valores de marca. Devuelve el formato de hora predeterminado cuando no se especifica el especificador.
Sintaxis:
time.tickFormat( count, specifier )
Parámetros: esta función acepta dos parámetros, como se indicó anteriormente y se describe a continuación:
- count: Especifica el número de valores de tick.
- especificador: Es la string que se utilizará como especificador. Es del tipo de formato “s”.
Valores devueltos: esta función no devuelve nada.
Los siguientes programas ilustran la función time.tickFormat() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>time.tickFormat() Function </p>
<script>
var time = d3.scaleTime()
// Specify the domain and range
.domain([2001 - 01 - 01, 2005 - 01 - 02])
.range([1, 100]);
var ticks = time.ticks(1);
// Specify the format of the ticks
var tickFormat = time.tickFormat(1, "%Y-%m-%d ");
document.write("<h3>" +
ticks.map(tickFormat) + "</h3>");
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>time.tickFormat() Function </p>
<script>
var time = d3.scaleTime()
// Specify the domain and range
.domain([2001 - 01 - 01, 2005 - 01 - 02])
.range([1, 100]);
var ticks = time.ticks(1);
// Specify the format of the ticks
var tickFormat = time.tickFormat(0, "%I %p");
document.write("<h3>" +
ticks.map(tickFormat) + "</h3>");
</script>
</body>
</html>
Producción:
