d3js: событие щелчка в повторно используемой диаграмме

У меня есть многоразовая диаграмма, которая отлично работает. Я добавил следующий простой код к повторно используемой диаграмме, ожидая, что он добавит прослушиватель кликов ко всем созданным им диаграммам.

d3.cloudshapes.barChart = function module() {
    var margin = {top: 10, right: 10, bottom: 20, left: 20},
        width = 500,
        height = 500,
        gap = 0,
        ease = "bounce";
    var svg;


    // Define the 'inner' function: which, through the surreal nature of JavaScript scoping, can access
    // the above variables. 
    function exports(_selection) {
        _selection.each(function(_data) {
            var chartW = 60,
                chartH = 60;

        var test_data = _data.value;

            var x1 = d3.scale.ordinal()
                    .domain(test_data.map(function(d) { return d.x; }))
                    .rangeRoundBands([0, chartW], 0.1);

            var y1 = d3.scale.linear()
                    .domain([0, 36])
                    .range([chartH, 0]);

        var color = d3.scale.category10();

        // If no SVG exists, create one - and add key groups:
            if (!svg) {
                svg = d3.select(this)
                     .append("svg")
             .attr("width", width)
             .attr("height", height)
                     .classed("chart", true);
                var container = svg.append("g").classed("container-group", true);
                container.append("g").classed("chart-group", true);
        container.attr({transform: "translate(" + 60*_data.row + "," + 60*_data.col + ")"});
        container.on("click", click);

            }

        // Transition the width and height of the main SVG and the key 'g' group: 
            svg.classed("chart", true).transition().attr({width: width, height: height});
           var container = svg.append("g").classed("container-group", true);
        container.append("g").classed("chart-group", true);
        container.attr({transform: "translate(" + 60*_data.row + "," + 60*_data.col + ")"});

        container.on("click", click);

            function click()  {
                console.log("I got clicked");
            }

        // Define gap between bars: 
            var gapSize = x1.rangeBand() / 100 * gap;

        // Define width of each bar: 
            var barW = x1.rangeBand() - gapSize;

            // Select all bars and bind data:  
            var bars = svg.selectAll(".chart-group")
                        .selectAll(".bar")
                        .data(test_data);

        bars.enter().append("rect")
            .classed("bar", "true")
            .attr({
                width: barW,
                x: function (d) {                   
                    return x1(d.x) + gapSize / 2; },
                y: function(d) { return y1(d.y); },
                height: function(d) { return chartH - y1(d.y); }
        })
            .attr("fill", function(d) { return color(d.x); });



        });
    }

Но функция щелчка работает только для последнего экземпляра графика, отображаемого повторно используемой диаграммой. Как можно добавить прослушиватель кликов к каждому графику, отображаемому многократно используемой диаграммой??

Более простая версия находится здесь fiddle. Я хочу добавить увеличенную всплывающую гистограмму svg при нажатии на маленькие гистограммы. Я думаю, что проблема связана с динамически созданным div, потому что, когда я пытался создать диаграммы в предопределенном div, функция щелчка работала нормально.

Любая помощь приветствуется !