CODEWITHSUNDEEP
d3.jssvghtml5-canvas
RiskX
RiskX

Reputation: 591

Using D3 axis functionality on a canvas

I'm trying to draw an axis on a canvas using D3 functionality (as exampled here https://www.tutorialsteacher.com/d3js/axes-in-d3). However every example I've seen is using an SVG while I wish to use canvas. On the other hand I didn't see any indication, in their documentation or elsewhere, that it can't be done in canvas.

Is it possible? If so, how?

Upvotes: 2

Views: 1222

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

In short: no, that's not possible.

D3 is pretty much render agnostic, meaning it can be used to create SVG, Canvas, other HTML elements etc. However, some modules are indeed quite specific, and that's the case of d3-axis.

If you have a look at d3-axis source code you'll see that it append SVG <path>, <line> and <text> elements for creating the axis. For instance:

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

Finally, here you have a discussion on this subject, where Bostock (D3 creator) abandons the idea of modifying the d3-axis module for creating axes on HTML canvas.

Upvotes: 3

Related Questions