Learn D3.js

Canvas zooming

Zoom transforms can also be applied to Canvas contexts. The following example (see Zoom/13-transforms-canvas.html) is a Canvas version of the previous example based on SVG, and behaves in the same way. First, you need to set up a Canvas selection and obtain the context, as follows:

const canvas = d3.select("body").append("canvas")                 .attr("height", height).attr("width", width);const ctx = canvas.node().getContext("2d");ctx.translate(margin,margin);

A translate transform was applied to the context so that it is rendered in the same place as the SVG chart object from the previous example.

The grid consists of a series of lines. The context() method is used to configure d3.line() so that it will generate a list of path method calls ...