Skip to content

Instantly share code, notes, and snippets.

@nachocab
Created July 1, 2012 14:00
Show Gist options
  • Save nachocab/3028512 to your computer and use it in GitHub Desktop.
Save nachocab/3028512 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src='http://mbostock.github.com/d3/d3.js'></script>
</head>
<body>
<script type="text/javascript">
var textElems = ["text1","text2"]
var x = d3.scale.ordinal().domain(d3.range(textElems.length)).rangeBands([0, 120]);
var xCircle = d3.scale.ordinal().domain(d3.range(textElems.length+1)).rangeBands([0, 180]);
var svg = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 200)
.append("g")
.attr("transform", "translate(200,100)")
circles = svg.selectAll("circle")
.data([1,2,3])
.enter().append("circle")
.attr("r",3)
.attr("cx",0)
.attr("cy",0)
.attr("stroke","red")
.attr("fill","none")
.attr("transform", function(d, i) { return "translate(" + xCircle(i)+",0)"; })
text = svg.selectAll("text")
.data(textElems)
.enter().append("text")
.text(function(d){return d})
.attr("y", 0)
.attr("x", 60)
.attr("text-anchor", "start")
.attr("transform", function(d, i) { return "translate(" + x(i)+",0) rotate(-45) "; })
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment