c2/demos/layers3.js

d3 component canvas

window.addEventListener('DOMContentLoaded',function () {
    var content = document.querySelector('.content');
    load();
})


function load () {

    var Rect = c2.element(function (context,d,i) {
        var x = this.x,y = this.y,w=this.w,h=this.h
        context.fillRect(
            x,
            y,
            w,
            h
        );
    }).attributes({
        x : c2.types.float,
        y : c2.types.float,
        w : c2.types.float,
        h : c2.types.float 
    });

    var data = [],
    content = d3.select('.content'),
    num_data = 64000,
    num_groups = 16;
    for (var i=0,ln=num_data;i<ln;i++) {
        data.push({
            value : Math.random(),
            id : i
        });
    }

    content.datum(data)

    var 
    groups = Array.apply(null,new Array(num_groups)).map((d,i) => data.slice(Math.ceil((data.length/num_groups)*i),Math.ceil((i+1)*(data.length/num_groups)))),
    layers = content,
    divider = groups;

    var divider = groups.length;
    while ((divider=Math.ceil(divider/2))>1) {
        layers = d3.selectAll([...layers.append('div').attr('class','canvas-wrapper').nodes(),...layers.append('div').attr('class','canvas-wrapper').nodes()]);
    }
    layers.append('canvas');
    layers.append('canvas').attr('class','lob-up');
    var cnt=0;
    layers = d3.selectAll('canvas');//.style('z-index',() => cnt++);
    cnt=0;
     //d3.selectAll('.canvas-wrapper').style('z-index',() => cnt++);
    cnt=0
    layers.datum((d,i) => groups[cnt++]||[]);

    //layers = layers.datum((d,i)=>{
        //return d[i];
    //})
    //layers = content.selectAll('canvas').data(groups);
    //layers = layers.enter().append('div').attr('class','canvas-wrapper').append('canvas').merge(layers);

    var contexts = layers.select(c2.Context2d)
        .datum((d,i)=>d)
        .on('tick',function () {
            this.canvas.height = height;
        }).on('tock',function () {
        })

    var direction = 1,
    width = window.innerWidth - 450,
    height = window.innerHeight-50,
    last_size = data.length;
    //width/=2
    //height/=2

    layers.attr('height',(height)|0);
    layers.attr('width',(width)|0);
    //layers.style('width',(width)+'px');
    //layers.style('height',(height)+'px');
    //layers.style('transform','translate3d(-25%,-25%,0)scale(0.5)');



    function render () {
        var cnt=0;
        contexts.each(function () {
            if (!this._w) {
                this._w = cnt++;
            } else {
                throw "no1"
            }
            if (!this.context._w) {
                this.context._w = cnt;
            } else {
                throw "no2"
            }
            this.context.imageSmoothingEnabled = false;
            this.context.globalCompositeOperation = 'destination-in';
            //console.error(this.context.globalCompositeOperation);
            this.context.translate(0.5,.5)
        });
        //return;
        //return;
        //console.error(contexts.node().context.imageSmoothingEnabled=false)
        //contexts.node().context.translate(0.5,0.5)
        //return;
        var lastSize = last_size,
        xScale = d3.scaleLinear().range([25,width-50]).domain([0,data.length]),
        yScale = d3.scaleLinear().range([25,height-50]).domain([0,d3.max(data,(d)=>d.value)])

        var elements = contexts.selectAll(Rect).data((d,i) => d, (d,i) => d.id);
        elements = elements.enter().append(Rect)
            .attr('x',width)
            .attr('y',(d)=>height-yScale(d.value)/2)
            .attr('w',0)
            .attr('h',0)
            .merge(elements)
            .call(
                c2.animate()
                .duration(2000)
                .ease(d3.easeLinear)
                .delay((d,i)=> direction === -1 ? Math.max((lastSize-d.id)/50,1) : Math.max(d.id/50,1))
                .to({
                    x : (d,i) => xScale(d.id),
                    y : (d,i) => (d._y = yScale(d.value),(height-25)-d._y),
                    w : Math.max(width/data.length-0.5,1),
                    h : (d,i) => Math.max(d._y,1)
                })
            )
    }
    render()
    
}




/*
 *function test (start,end,data) {
 *    var data = [];
 *    for (var i=1,ln=start;i<ln;i++) {
 *        data.push(i);
 *    }
 *
 *    function innerTest (next) {
 *        var result,arr,v,j,jln,k,kln;
 *        data.push(next);
 *        for (var num_groups=1,ln=next;num_groups<=ln;num_groups++) {
 *            result = Array.apply(null,new Array(num_groups)).map((d,i) => data.slice(Math.ceil((data.length/num_groups)*i),Math.ceil((i+1)*(data.length/num_groups))));
 *            v=1;
 *            for (j=0,jln=result.length;j<jln;j++) {
 *                arr = result[j];
 *                for (k=0,kln=arr.length;k<kln;k++) {
 *                    if (arr[k] !== v++) {
 *                        throw "NOT RIGHT"
 *                    }
 *                }
 *            }
 *        }
 *        next < end && innerTest(next+1)
 *    }
 *    innerTest(start);
 *}
 */