D3’s d3.geo.path can be used with Canvas as well as SVG.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projection = d3.geo.albers() | |
| .scale(1000); | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var context = canvas.node().getContext("2d"); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .context(context); | |
| d3.json("/mbostock/raw/4090846/us.json", function(error, us) { | |
| if (error) throw error; | |
| path(topojson.feature(us, us.objects.counties)); | |
| context.stroke(); | |
| }); | |
| </script> |
wangjiaji
commented
Feb 25, 2014
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It should be noted that beginPath() should be called manually if you want to redraw after panning or zooming.