Practice sideways

_.md

[ Launch Inlet ]
Gist #4370049 [ Launch Inlet ]
Gist #3651651 No parent Inlet

config.json

{"description":"Practice sideways","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.6537996545768565,"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 fontSize = 17;
var data1 = [
  {id: "weezy", value: 100},
  {id: "yxsdsds", value: 45},
  {id: "jeezyjkjkjsds", value: 60},
  {id: "zeezy", value: 35},
  {id: "reezy", value: 75}
];

var maxLblLength = d3.max(data1, function (d){
  return d.id.length;
});

//console.log(maxLblLength);

var bars = svg.selectAll("rect")
    .data(data1)
    .enter();
    
bars.append("text")
  .text(function(d){
    return d.id;
  })
  .attr({
    y: function(d, i){
      return (i * 36) + 32;
    },
    fill: "#000000",
    'font-size': fontSize,
    'text-anchor': 'end' 
  })
  .classed("barLbl", true);



var maxTextWidth = 0;

d3.selectAll(".barLbl")
  .each(function(d, i){
    var txtWid = this.getComputedTextLength();
    if (txtWid > maxTextWidth){
      maxTextWidth = txtWid;
    }
  });

d3.selectAll(".barLbl")
  .attr({
    x : maxTextWidth
  });

//alert("race!");  

bars.append("rect")
    .attr({
      height: 30,
      width: function(d,i) {
        return d.value;
      },
      transform: function(d,i) {
        var y =  (i * 36) + 11;
        var x = maxTextWidth + 3;//maxLblLength * (fontSize - 3);
        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({
          y: 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;
          },
          height: 30,
          fill: "#000000"
        })
        //.classed("barUnclk", true);
        
       svg.selectAll("#bar" + i)
        .classed("barUnclk", false)
        .classed("barClk", true)
        .transition()
        .duration(1000)
        .ease("bounce")
        .attr({
		  y : function(dX, iX){
            return iX 
          },
          height: 60, 
	      fill: "#FF0000"
          })
        //.classed("barUnclk", false)
        //.classed("barClk", true)
    });