Gephi SVG interactivity

clickEvents.js

// Gephi SVG visualisation interactivity
$('.viz-view svg').click(function (event) {

    // check if the click was on one of the SVG child elements
    if (event.target !== this) {

        // set the clicked element as the target (because 'this' is the parent SVG element)
        var target = $(event.target);

        // if the click is on an edge path
        if (target.is('#edges path')) {
            // (re)set clicked path to full opacity
            target.css('opacity', '1');
            // lower the opacity of all other egde paths
            target.siblings().each(function () {
                $(this).css('opacity', '0.1');
            })
        } else if (target.is('#node-labels text') || target.is('#nodes circle')) { // if a label or a node itself was clicked
            // get the ID of the node - this is the same as the label field in Gephi
            var nodeId = target.attr('class')
            // (re)set paths linked to the clicked node (they will have the node ID as a class) to full opacity
            target.parents('svg').find('#edges path.' + nodeId).css('opacity', '1')
            // lower the opacity of other paths
            target.parents('svg').find('#edges path').not('.' + nodeId).css('opacity', '0.1')
        }

    } else {  // this is to reset the view
        $(this).find('path').css('opacity', '1')
    }

});