在画布上使用D3轴功能 [英] Using D3 axis functionality on a canvas

问题描述

我正在尝试使用D3功能在画布上绘制轴（如此处的示例 https://www.tutorialsteacher.com/d3js/axes-in-d3 ）。但是，我看到的每个示例都在使用SVG，而我希望使用画布。另一方面，在他们的文档或其他地方，我没有看到任何指示无法在画布上完成。

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?

推荐答案

总之：不，那是不可能的。

In short: no, that's not possible.

D3几乎是不可知的，这意味着它可用于创建SVG，Canvas，其他HTML元素等。但是，某些模块的确非常特定，例如 d3轴 。

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.

如果您看看位于 d3轴 源代码，您会看到它附加了SVG < path> ，< line> 和< text> 元素来创建轴。例如：

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")

最后，这里关于这个主题的讨论，Bostock（D3创建者）放弃了修改 d3轴模块以在HTML画布上创建轴的想法。

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.

这篇关于在画布上使用D3轴功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！