Search code examples
javascriptd3.jssvgscalebrush

D3.js Use d3.svg.brush on an infinite scale

I'm using d3.js and I would like to use a brush on my entire svg canvas (with zoom and pan support), so I just put an infinity range in a linear scale as follows:

d3.svg.brush()
    .x(d3.scale.linear().range([-Infinity, Infinity]))
    .y(d3.scale.linear().range([-Infinity, Infinity]))
    ...()

The brush is working on the entire sv, but there are some nasty javascript errors when using this 'trick'

Invalid value for <rect> attribute x="NaN"

Working example: http://jsfiddle.net/cn010zt3/

Any idea on how to perform this correctly?

Solution

  • D3 scales require actual values and won't work properly with Infinity. You don't need to use Infinity anyway, as your SVG has a finite size -- simply use that. Complete demo here.