Skip to content

Instantly share code, notes, and snippets.

@alexbbrown
Created January 3, 2013 05:15
Show Gist options
  • Save alexbbrown/4441012 to your computer and use it in GitHub Desktop.
Save alexbbrown/4441012 to your computer and use it in GitHub Desktop.
two simple but different axes
{"description":"two simple but different axes","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}
var svg = d3.select("svg");
function axis1(x,y) {
loc=svg
.selectAll("g")
.data(["Foo"], // need this dummy to make it appear
function(){
return "Foo" // key unique to axis1
})
loc.enter()
.append("g")
.each(function(){
d3.select(this).append("rect")
d3.select(this).append("text")
})
loc.select("rect")
.attr("x", x)
.attr("y", y)
.attr("width", 100)
.attr("height", 20)
.style("fill","grey")
loc.select("text")
.attr("x", 60+x)
.attr("y", y+15)
.text("label")
loc.exit().remove()
}
function axis2(x,y) {
loc=svg
.selectAll("g")
.data(["Bar"], // need this dummy to make it appear
function(){
return "Bar" // key unique to axis1
})
loc.enter()
.append("g")
.each(function(){
d3.select(this).append("line")
d3.select(this).append("text")
})
loc
.append("line")
.attr("x1", x)
.attr("y1", y)
.attr("x2", x+100)
.attr("y2", y)
.style("stroke","black")
loc
.append("text")
.attr("x", x+100)
.attr("y", y)
.text("label")
loc.exit().remove()
}
axis1(400,100)
axis2(400,100)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment