Skip to content

Instantly share code, notes, and snippets.

@anotherjavadude

anotherjavadude/index.html

Created May 26, 2012 13:07
Show Gist options
  • Save anotherjavadude/2793876 to your computer and use it in GitHub Desktop.
Save anotherjavadude/2793876 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Groups in d3.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG GROUPS</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
.label1
{
font-size: 24pt;
font-family: Verdana;
fill-opacity: .6;
}
.label2
{
font-family: Verdana;
font-size: 12pt;
fill: white;
fill-opacity: .6;
}
</style>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var svgcanvas = d3.select("#viz")
.append("svg:svg")
.attr("width", 400)
.attr("height", 400);
// Background dark gray rectangle
svgcanvas.append("svg:rect")
.attr("x",0)
.attr("y",0)
.attr("width",325)
.attr("height",250)
.style("fill", "rgb(125,125,125)");
// group attributes apply to all members
group1 = svgcanvas.append("svg:g")
//.attr("stroke", "white")
//.attr("stroke-width", 3)
.attr("fill", "orange");
circle1 = group1.append("svg:circle")
.attr("cx", 75)
.attr("cy", 162.5)
.attr("r", 37.5);
text1 = group1.append("svg:text")
.text("Group 1")
.attr("class", "label1")
.attr("x", 37.5)
.attr("y", 237.5)
//.style("stroke", "white")
//.style("stroke-width", 1)
//.style("font-size", "160%")
//.style("fill", "orange");
text1 = svgcanvas.append("svg:text")
.text("Group 2")
.attr("class", "label2")
.attr("x", 207.5)
.attr("y", 237.5)
console.log(svgcanvas);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment