Usando a funcionalidade do eixo D3 em uma tela

Aug 24 2020

Estou tentando desenhar um eixo em uma tela usando a funcionalidade D3 (como exemplo aqui https://www.tutorialsteacher.com/d3js/axes-in-d3) No entanto, todos os exemplos que vi usam um SVG enquanto desejo usar o canvas. Por outro lado, não vi qualquer indicação, em sua documentação ou em qualquer outro lugar, que isso não possa ser feito em canvas.

É possível? Se sim, como?

Respostas

2 GerardoFurtado Aug 24 2020 at 12:27

Resumindo: não, isso não é possível.

D3 é praticamente agnóstico de renderização, o que significa que pode ser usado para criar SVG, Canvas, outros elementos HTML, etc. No entanto, alguns módulos são bastante específicos, e é o caso de d3-axis.

Se você dê uma olhada no d3-axis código fonte que você vai ver que ele anexar SVG <path>, <line>e <text>elementos para a criação do eixo. Por exemplo:

path.enter().insert("path", ".tick")

Finalmente, aqui você tem uma discussão sobre o assunto, onde Bostock (criador do D3) abandona a ideia de modificar o d3-axismódulo para criar eixos em canvas HTML.