grouped manipulation

_.md

[ Launch: grouped manipulation ] 1ceb133640c560003200 by enjalot

config.json

{"description":"grouped manipulation","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/hvqYB9h.png"}

inlet.js

var svg = d3.select("svg");

var data = [
  { xIndex: 0, total: 300, bars: [ {name: "a", y0: 0, y1: 100}, {name: "b", y0: 100, y1: 150}, {name: "c", y0: 150, y1: 300}  ]},
  { xIndex: 1, total: 300, bars: [ {name: "a", y0: 0, y1: 50}, {name: "b", y0: 50, y1: 120}, {name: "c", y0: 120, y1: 300}  ]},
    { xIndex: 2, total: 300, bars: [ {name: "a", y0: 0, y1: 250}, {name: "b", y0: 250, y1: 280}, {name: "c", y0: 280, y1: 300}  ]},
    { xIndex: 3, total: 200, bars: [ {name: "a", y0: 0, y1: 98}, {name: "b", y0: 98, y1: 180}, {name: "c", y0: 180, y1: 200}  ]}
]

data.forEach(function(d) {
  d.bars.forEach(function(b) {
    b.i = d.xIndex;
    b.total = d.total;
  })
})

var width = tributary.sw;
var height = tributary.sh;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.category20()

x.domain(data.map(function(d) { return d.xIndex; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);

var group = svg.selectAll(".datum")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.xIndex) + ",0)"; });

var rects = group.selectAll("rect")
  .data(function(d) { return d.bars; })
.enter().append("rect")

function render(r) {
r
  .attr("width", x.rangeBand())
  .attr("y", function(d) { 
    y.domain([0, d.total]);
    return y(d.y1); })
  .attr("height", function(d) { 
    y.domain([0, d.total]);
    return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); })
  .style("stroke", "#000")
d3.selectAll("circle")
.attr({
  cx: function(d) { return d.x },
  cy: function(d) { y.domain([0, d.total]); return y(d.y) },
  r: 20,
  "fill-opacity": 0.2,
  stroke: "#000"
})

}
render(rects)

var drag = d3.behavior.drag();
drag.on("dragstart", function(d) {
})
.on("dragend", function(d) {
  var datum = data[d.i];
  
  datum.bars.forEach(function(b,i) {
    if(b === d) {
      if(datum.bars[i-1]){
        b.y0 = datum.bars[i-1].y1
      } else {
        b.y0 = 0;
      }
      b.y1 = b.y0
      if(datum.bars[i+1]) {
        datum.bars[i+1].y0 = b.y1
      }
    }
  });

  render(group.selectAll("rect"))
  
})
.on("drag", function(d) {
  //console.log(d, d3.event)
})

rects.call(drag)

var circles = group.selectAll("circle")
.data(function(d) { 
  return [
    { i: 0, x: x.rangeBand() / 2, y: d.bars[0].y1, total: d.total, group: d.xIndex},
    { i: 1, x: x.rangeBand() / 2, y: d.bars[1].y1, total: d.total, group: d.xIndex}
  ]
})
.enter()
.append("circle")
.attr({
  cx: function(d) { return d.x },
  cy: function(d) { y.domain([0, d.total]); return y(d.y) },
  r: 20,
  "fill-opacity": 0.2,
  stroke: "#000"
})

var drag2 = d3.behavior.drag()
.on("drag", function(d) {
  var datum = data[d.group];
  var dy = d3.event.dy * 0.3;
  if(d.i == 0) {
    datum.bars[0].y1 -= dy;
    datum.bars[1].y0 -= dy;
  } else {
     datum.bars[1].y1 -= dy;
    datum.bars[2].y0 -= dy;
  }
  d.y -= dy;

  render(rects)
})
circles.call(drag2)