Skip to content

Instantly share code, notes, and snippets.

@gelicia
Created December 24, 2012 17:13
Show Gist options
  • Save gelicia/4370049 to your computer and use it in GitHub Desktop.
Save gelicia/4370049 to your computer and use it in GitHub Desktop.
Practice
{"description":"Practice","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.44999999999999996,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":610,"height":608,"hide":false},"hidepanel":false}
var svg = d3.select("svg");
var data1 = [
{id: "weezy", value: 100},
{id: "yeezy", value: 45},
{id: "jeezy", value: 60},
{id: "zeezy", value: 35},
{id: "reezy", value: 75}
];
var bars = svg.selectAll("rect")
.data(data1)
.enter()
.append("rect")
.attr({
width: 30,
height: function(d,i) {
return d.value;
},
transform: function(d,i) {
var x = (i * 36) + 100;
var y = 100;
return "translate(" + [x, y] + ")";
},
id : function(d, i){
return "bar" + i;
}
})
.classed("bars", true)
.classed("barUnclk", true)
.on("click", function(d,i){
// alert(i);
var allBars = svg.selectAll(".bars");
var notClk = allBars.filter(function (dIn, iIn) {
return iIn != i;
});
allBars.classed("barUnclk", false)
.classed("barClk", false)
.classed("barUnclk", true);
notClk.transition()
.duration(1000)
.ease("bounce")
.attr({
x: function(dX, iX){
// alert("notClk:" + iX + " / " + i);
var offSet = 0;
//if after the clicked index, move forward
if (iX > (i-1)) {
// alert("notClk move +30");
offSet = 30;
}
return iX + offSet;
},
width: 30,
fill: "#000000"
})
//.classed("barUnclk", true);
svg.selectAll("#bar" + i)
.classed("barUnclk", false)
.classed("barClk", true)
.transition()
.duration(1000)
.ease("bounce")
.attr({
x : function(dX, iX){
return iX
},
width: 60,
fill: "#FF0000"
})
//.classed("barUnclk", false)
//.classed("barClk", true)
});
/*var button = svg.append("rect")
.attr({
width: 100,
height: 30,
x: 426,
y: 200,
fill: "#e3e3e3",
stroke: "#000000"
})
.on("click", function() {
svg.selectAll("#bar0")
.transition()
//.delay(1000)
.duration(1499)
.ease("bounce")
//.ease("cubic")
.attr({
fill: "#ff0000"
})
})*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment