ssv/ssv/static/js/source/ssv_renderers.es6
// Function to initialize patterns for element
Function to initialize patterns for element
Function to initialize patterns for element
function render_pattern(node, pattern_id, prop_data, style_apply) {
    var parent = d3.select(node.parentNode);
    if (parent.select('defs').empty()) {
        parent.append('defs')
    }
    var norm_val = node.getBBox().height;
    if (prop_data[0].length > 1) {
        prop_data = prop_data.map(function(t) {return t.sort(function(a,b) {return -(a[0] - b[0])})});
    }
    var prop_data = prop_data.map(function(t) {
        return t.map(function(d) {
            var order = Math.max(0, 1 - d[0]) * norm_val;
            return [order].concat(d.slice(1, d.length))
        })
    });
    var defs = parent.select('defs');
    var pattern = defs.append('pattern')
        .attr('id', pattern_id)
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('patternContentUnits', 'userSpaceOnUse')
        .datum(prop_data);
    var pattern_data = pattern.selectAll()
        .data(function(t) {return t[0]})
        .enter();
    pattern_data.each(function() {
        pattern.append('rect')
            .attr('id', 'base')
            .attr('x','0')
            .attr('width','100%')
            .attr('height', '100%');
        pattern.append('rect')
            .attr('id', 'transition')
            .attr('x','0')
            .attr('width','100%')
            .attr('height','1px')
            .attr('fill', '#FFFFFF');
        pattern.append('rect')
            .attr('id', 'overlay')
            .attr('x','0')
            .attr('width', '100%')
            .attr('height', '100%');
    });
    var sel = d3.select(node)
    if (node.nodeName == 'g') {
        sel = sel.select('circle,rect,ellipse,path:not(.static)');
    }
    style_apply == 'fill' ? sel.style('fill', 'url(#' + pattern_id + ')') :
        sel.style('stroke', 'url(#' + pattern_id + ')');
    sel.style('fill-opacity', 1);
    sel.style('opacity', 1);
    var update_func = function(x, trans_dur) {
        pattern.selectAll('#base')
            .data(function(t) {return t[x]})
            .transition()
            .duration(trans_dur)
            .attr('y', function(d) {return d[0]})
            .style('fill', function(d) {return d[1]})
            .style('opacity', function(d) {return d[2]});
        pattern.selectAll('#transition')
            .data(function(t) {return t[x]})
            .transition()
            .duration(trans_dur)
            .attr('y', function(d) {if (d[0] > 0) {return d[0]} else {return '-1%' }})
            .style('opacity', function(d) {return d[2]});
        pattern.selectAll('#overlay')
            .data(function(t) {return t[x]})
            .transition()
            .duration(trans_dur)
            .attr('fill', function(d) {if(d[3] == null) {return 'none'} else {return 'url(#' + d[3] + ')'}})
            .attr('y', function(d) {return d[0]})
            .style('opacity', function(d) {return d[2]});
    };
    return update_func
}
function render_pattern ( node , pattern_id , prop_data , style_apply ) { var parent = d3 . select ( node . parentNode ) ; if ( parent . select ( 'defs' ) . empty ( ) ) { parent . append ( 'defs' ) } var norm_val = node . getBBox ( ) . height ; if ( prop_data [ 0 ] . length > 1 ) { prop_data = prop_data . map ( function ( t ) { return t . sort ( function ( a , b ) { return - ( a [ 0 ] - b [ 0 ] ) } ) } ) ; } var prop_data = prop_data . map ( function ( t ) { return t . map ( function ( d ) { var order = Math . max ( 0 , 1 - d [ 0 ] ) * norm_val ; return [ order ] . concat ( d . slice ( 1 , d . length ) ) } ) } ) ; var defs = parent . select ( 'defs' ) ; var pattern = defs . append ( 'pattern' ) . attr ( 'id' , pattern_id ) . attr ( 'x' , 0 ) . attr ( 'y' , 0 ) . attr ( 'width' , '100%' ) . attr ( 'height' , '100%' ) . attr ( 'patternContentUnits' , 'userSpaceOnUse' ) . datum ( prop_data ) ; var pattern_data = pattern . selectAll ( ) . data ( function ( t ) { return t [ 0 ] } ) . enter ( ) ; pattern_data . each ( function ( ) { pattern . append ( 'rect' ) . attr ( 'id' , 'base' ) . attr ( 'x' , '0' ) . attr ( 'width' , '100%' ) . attr ( 'height' , '100%' ) ; pattern . append ( 'rect' ) . attr ( 'id' , 'transition' ) . attr ( 'x' , '0' ) . attr ( 'width' , '100%' ) . attr ( 'height' , '1px' ) . attr ( 'fill' , '#FFFFFF' ) ; pattern . append ( 'rect' ) . attr ( 'id' , 'overlay' ) . attr ( 'x' , '0' ) . attr ( 'width' , '100%' ) . attr ( 'height' , '100%' ) ; } ) ; var sel = d3 . select ( node ) if ( node . nodeName == 'g' ) { sel = sel . select ( 'circle,rect,ellipse,path:not(.static)' ) ; } style_apply == 'fill' ? sel . style ( 'fill' , 'url(#' + pattern_id + ')' ) : sel . style ( 'stroke' , 'url(#' + pattern_id + ')' ) ; sel . style ( 'fill-opacity' , 1 ) ; sel . style ( 'opacity' , 1 ) ; var update_func = function ( x , trans_dur ) { pattern . selectAll ( '#base' ) . data ( function ( t ) { return t [ x ] } ) . transition ( ) . duration ( trans_dur ) . attr ( 'y' , function ( d ) { return d [ 0 ] } ) . style ( 'fill' , function ( d ) { return d [ 1 ] } ) . style ( 'opacity' , function ( d ) { return d [ 2 ] } ) ; pattern . selectAll ( '#transition' ) . data ( function ( t ) { return t [ x ] } ) . transition ( ) . duration ( trans_dur ) . attr ( 'y' , function ( d ) { if ( d [ 0 ] > 0 ) { return d [ 0 ] } else { return '-1%' } } ) . style ( 'opacity' , function ( d ) { return d [ 2 ] } ) ; pattern . selectAll ( '#overlay' ) . data ( function ( t ) { return t [ x ] } ) . transition ( ) . duration ( trans_dur ) . attr ( 'fill' , function ( d ) { if ( d [ 3 ] == null ) { return 'none' } else { return 'url(#' + d [ 3 ] + ')' } } ) . attr ( 'y' , function ( d ) { return d [ 0 ] } ) . style ( 'opacity' , function ( d ) { return d [ 2 ] } ) ; } ; return update_func }
Function to initialize patterns for element
Function to initialize patterns for element
// Add defs section if none exist // Sort prop data and denormalize order prop // Build pattern and apply initial state // Add base pattern // Add transition zones // Add overlays // Set to stroke or fill based on style_apply // Set initial opacities to 1 // Update base pattern // Update transition zones // Update overlays