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