draw(data, g, colors){
    let that = this;
    g.selectAll('rect')
      .data(data, d => d.name + d.start + d.end)
      .join(
      enter => {
        enter.append('rect')
        .attr('x', 0)
        .attr('y', d => this.yNew(d.start))
        .attr('width', 600)
        .attr('height', d => this.yNew(d.end) - this.yNew(d.start))
        .attr('fill', d => colors(Math.random() * 50))
        .attr('rx', 20)
        .attr('ry', 20)
        .call(d3.drag()
          .subject(function() {
            return {x: d3.select(this).attr('x'), y: d3.select(this).attr('y')}
          })
          .on('start', function(d) {
            console.log('start') 
            current = d
            d3.select(this).raise();
            that.debounce(function() {
              console.log('down')
              console.log('a',d3.mouse(this))
              y_coor = Math.min(400, Math.max(0, d3.event.y));
              if (y_coor > 350){
                that.bufferCoor -= 10;
                g.attr("transform", "translate(300," + (40 + that.bufferCoor) + ")");
              }
              if (y_coor < 50){
                that.bufferCoor += 10;
                g.attr("transform", "translate(300," + (40 + that.bufferCoor) + ")");
              }
            }, 50)
          })
          .on("drag", function(d) {
            console.log('drag')
            console.log(that.isZoomed ? 1150 : 550)
            console.log((that.yNew(d.end) - that.yNew(d.start)))
            let endLimit;
            if (that.isZoomed){
              endLimit = 1200 - (that.yNew(d.end) - that.yNew(d.start))
            }
            else endLimit = 600 - (that.yNew(d.end) - that.yNew(d.start))
            console.log(endLimit)
            y_coor = Math.min(endLimit, Math.max(0, d3.event.y));
            
            (d3.select(this)).attr("y", y_coor);
          })
          .on("end", function(d) {
            console.log('end')
            clearInterval(that.timer)
            let old_start, old_end;
            [old_start, old_end] = [current.start, current.end]
            let currentStartTime = Date.parse(this.yNew.invert(y_coor));
            // console.log('current ' + currentStartTime)
            current.end = (current.end - current.start) + currentStartTime;
            current.start = currentStartTime
            data.forEach(d => {
              ///// prevent splitting itself
              if (old_start < currentStartTime && currentStartTime < old_end) return;

              if (d.start < currentStartTime && currentStartTime < d.end){
                //// split
                console.log('split')
                data.push({
                  'name': d.name,
                  'start': current.end,
                  'end': d.end + (current.end - current.start)
                })
                d.end = current.start
              }
            });
            console.log(data);

            this.draw(data, g, colors);
          }.bind(this)))
        },
      update => update
        .attr('y', d => this.yNew(d.start))
        .attr('height', d => {
          return this.yNew(d.end) - this.yNew(d.start)
        }),
      exit => exit.remove()
    );

  let current;
  let y_coor;
  }