D3画布画笔和缩放

Question

我正在使用画布制作热图。我没有使用SVG，因为我想渲染超过30,000的数据点。我找到了使用brush进行焦点+上下文的这个例子。 https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

但是这适用于SVG，我想使用画布的这个功能。 是否有可能用d3做到这一点？ 如果不是什么可以在画布上实现焦点+上下文的解决方法。

Answer 1

使用D3.js和Canvas构建可伸缩图表 https://github.com/xoor-io/d3-canvas-example 它支持：

1. 在画布上绘画，这对于海量数据很有用。
2. 缩放和平移。
3. 画笔和缩放可以帮助您解决问题。

Answer 2

d3-brush特别使用SVG：

d3画笔模块使用SVG实现对鼠标和触摸事件的画笔

尽管可以将SVG放在画布层的顶部，例如，请参见https://observablehq.com/@rdmurphy/combining-html-canvas-svg-flatbush-for-super-efficient-hov或https://observablehq.com/@d3/mona-lisa-histogram

Answer 3

此示例使用带有背景画布的svg画笔：http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e

此示例创建一个画布热图： https://bl.ocks.org/mbostock/3074470

此示例使用缩放创建画布热图，而不使用画笔：http://bl.ocks.org/tommct/8116740

这可以通过将可缩放画布与svg画笔组合来完成。