CODEWITHSUNDEEP
javascriptperformancesvgd3.js
Logan
Logan

Reputation: 165

D3: Can I get better performance when drawing and redrawing a series of rects?

I've created a linear heatmap with d3 by binding rectangles to my data (time and value):

heatmaps

Each heatmap can contain hundreds (in some cases thousands) of <rect> elements. The browser draws them initially without issue, but as I move along my timeline using a d3 axis (zoom behavior and programatic redraws), I see huge performance issues in my transition (a known SVG drawback).

Is there any way I can combat this? Would using a <linearGradient> with an equal number of <stop> elements improve things? Do I need to go with canvas instead of SVG?

Thanks!

Upvotes: 1

Views: 630

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

A linearGradient likely wouldn't help as you'd still need a DOM element for each stop. Canvas sounds like the way to go.

Upvotes: 2

Related Questions