SVG Dice using D3

This is a javascript D3 function I wrote to create SVG dice images.

function append_die(element,number,cx,cy,width,colour,dotcolour) {
	element.append("rect").attr("x", cx-width/2).attr("y", cy-width/2).attr("width", width).attr("height", width).attr("rx", width/6).attr("ry", width/6).attr("fill", colour);
	if (number == 1) {
	element.append("circle").attr("cx", cx).attr("cy", cy).attr("r", width/8).attr("fill", dotcolour);
	}
	if (number == 2) {
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	}
	if (number == 3) {
	element.append("circle").attr("cx", cx).attr("cy", cy).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	}
	if (number == 4) {
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	}
	if (number == 5) {
	element.append("circle").attr("cx", cx).attr("cy", cy).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	}
	if (number == 6) {
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy-width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy+width/4).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx+width/4).attr("cy", cy).attr("r", width/8).attr("fill", dotcolour);
	element.append("circle").attr("cx", cx-width/4).attr("cy", cy).attr("r", width/8).attr("fill", dotcolour);
	}
	
}

To use the function, just include this line in your code.

append_die(element,number,cx,cy,width,colour,dotcolour)

The element parameter is the element you want to make the die a sub-element of. The number is the number on the die. cx and cy are the co-ordinates of the centre of the die. The rest should be obvious.

You will, of course, need to have D3 included on your page for this to work. If you right-click the iframe example below you can take a look at a complete page.

Tagged with: ,
Posted in D3, SVG

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>