Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Creating and Customizing Axes | Adding Transitions Scales and Axes
JavaScript D3.js Visualization Essentials

bookCreating and Customizing Axes

script.js

script.js

index.html

index.html

copy

When you want to add axes to your chart, D3 provides dedicated axis generators that work seamlessly with your scales. The d3.axisBottom and d3.axisLeft methods create horizontal and vertical axes, respectively. You pass your scale to these axis generators, and then call them on a group element (g) in your SVG. The axis uses your scale to determine where to place ticks, labels, and lines, ensuring your data and visualization stay in sync.

You can customize axes in many ways: control the number of ticks with .ticks(), change tick formatting with .tickFormat(), and style text, lines, or the axis path using D3's selection and style methods. This means you can match the look and feel of your chart to your needs, from simple black lines to colorful, branded visuals. Axes are more than decoration—they make your charts readable and meaningful by showing the scale of your data.

question mark

Which D3 methods are commonly used to create horizontal and vertical axes?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

bookCreating and Customizing Axes

Deslize para mostrar o menu

script.js

script.js

index.html

index.html

copy

When you want to add axes to your chart, D3 provides dedicated axis generators that work seamlessly with your scales. The d3.axisBottom and d3.axisLeft methods create horizontal and vertical axes, respectively. You pass your scale to these axis generators, and then call them on a group element (g) in your SVG. The axis uses your scale to determine where to place ticks, labels, and lines, ensuring your data and visualization stay in sync.

You can customize axes in many ways: control the number of ticks with .ticks(), change tick formatting with .tickFormat(), and style text, lines, or the axis path using D3's selection and style methods. This means you can match the look and feel of your chart to your needs, from simple black lines to colorful, branded visuals. Axes are more than decoration—they make your charts readable and meaningful by showing the scale of your data.

question mark

Which D3 methods are commonly used to create horizontal and vertical axes?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6
some-alt