SVG background images on d3 fills

apply-styles.css

#graph svg g.us rect 
{
	fill: url(#tile-us) #cccccc;
}
#graph svg g.worldwide rect 
{
	fill: url(#tile-ww) #cccccc;
}

create-patterns.js

var svg = d3.select(this.el)
	.append('svg')
	.attr('class', 'chart')
	.attr('width', this.graphWidth)
	.attr('height', this.graphHeight),
	defs = svg.append('svg:defs');
defs
	.append('svg:pattern')
	.attr('id', 'tile-ww')
	.attr('patternUnits', 'userSpaceOnUse')
	.attr('width', '6')
	.attr('height', '6')
	.append('svg:image')
	.attr('xlink:href', '/images/tile-worldwide.png')
	.attr('x', 0)
	.attr('y', 0)
	.attr('width', 6)
	.attr('height', 6);
defs
	.append('svg:pattern')
	.attr('id', 'tile-us')
	.attr('patternUnits', 'userSpaceOnUse')
	.attr('width', '7')
	.attr('height', '9')
	.append('svg:image')
	.attr('xlink:href', '/images/tile-us.png')
	.attr('x', 0)
	.attr('y', 0)
	.attr('width', 7)
	.attr('height', 9);

generated.svg

<defs>
	<pattern id="tile-ww" patternUnits="userSpaceOnUse" width="6" height="6">
		<image href="/images/tile-worldwide.png?Wed Aug 01 2012 14:34:49 GMT+0100 (BST)" x="0" y="0" width="6" height="6"></image>
	</pattern>
	<pattern id="tile-us" patternUnits="userSpaceOnUse" width="7" height="9">
		<image href="/images/tile-us.png?Wed Aug 01 2012 14:34:49 GMT+0100 (BST)" x="0" y="0" width="7" height="9"></image>
	</pattern>
</defs>