c2/demos/layers2.js

d3 component canvas

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


function load () {

    var Proxy = c2.element(function (context,d,i) {
        var j,jln,children = this.children,child;
        for (var i=0,ln=contexts.length,ctx;i<ln;i++) {
            ctx = contexts[i];
            ctx.canvas.height = ctx.canvas.height;
        }
        //for (var i=0,ln=contexts.length,ctx;i<ln;i++) {
            //ctx = contexts[i];
            //ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
            //ctx.canvas.height = ctx.canvas.height;
            for (j=0,jln=children.length;j<jln;j++) {
                child = children[j];
                //if (
                    //child.x < ctx.right && (child.x+child.w) > ctx.left &&
                    //child.y < ctx.bottom && (child.y+child.h) > ctx.top
                //) {
                    //child.render(ctx);
                    child.render();
                //}
                //children[j].render(ctx);
            }
        //}
    });
    var Rect = c2.element(function (context,d,i) {
        var x=this.x,y=this.y,w=this.w,h=this.h,ctx;
        for (var i=0,ln=contexts.length;i<ln;i++) {
            ctx = contexts[i];
            contexts[i].fillRect(x - ctx.left,y-ctx.top,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 = 5;
    for (var i=0,ln=num_data;i<ln;i++) {
        data.push({
            value : Math.random(),
            id : i
        });
    }

    content.datum(data)

    var 
    layerSize = 550,
    layerColumns = Math.ceil(window.innerWidth / layerSize),
    layerRows = Math.ceil(window.innerHeight / layerSize),
    num_groups = layerColumns * layerRows,
    ctx,
    canvas,
    canvases =[],
    contexts = [];

    document.body.style.width = (layerColumns * layerSize) + 'px'
    document.body.style.height = (layerRows * layerSize) + 'px'
    console.error(num_groups,layerColumns);

    for (var i=0,ln=num_groups;i<ln;i++) {
        canvas = document.createElement('canvas');
        canvas.width = layerSize;
        canvas.height = layerSize;
        contexts.push(ctx=canvas.getContext('2d'));
        ctx.top = (Math.floor(i / layerColumns) * layerSize)
        ctx.left = ((i % layerColumns) * layerSize)
        ctx.size = layerSize;
        ctx.right = ctx.left + layerSize;
        ctx.bottom = ctx.top + layerSize;
        canvas.style.top = ctx.top + 'px'
        canvas.style.left = ctx.left + 'px'
        canvas.style.zIndex=i;
        canvases.push(canvas);
        document.body.appendChild(canvas);
    }

    var layers = d3.select(new Proxy());
        


    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)');
    //layers.style('z-index',(d,i)=>i)



    function render () {
        var cnt=0;
        //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 = layers.selectAll(Rect).data(data);
        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);
 *}
 */