Practice

_.md

[ Launch Inlet ]
Gist #3651651 No parent Inlet

config.json

{"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}

inlet.js

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"
        })

    })*/