Javascript d3js：单击可重用图表中的事件

我有一个可重复使用的图表，效果很好。我向可重用图表中添加了以下简单代码，希望它能将click listener添加到它创建的所有图表中

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); });



        });
    }

但是click函数只适用于可重用图表呈现的最后一个图形实例。如何将单击侦听器添加到可重用图表呈现的每个图形

这里有一个更简单的版本。我想在单击小条形图时添加一个缩放的popover条形图svg。我认为问题在于动态创建的div，因为当我尝试在预定义的div中创建图表时，click函数工作正常

任何帮助都将不胜感激

svg变量的范围导致了问题。在代码中，svg变量值在可重用函数的所有实例中共享。您可能希望使用enter创建SVG元素和内部组件，并将click侦听器添加到组件中。svg变量应该在exports函数中定义

// rest of the code...
function exports(selection) {
    selection.each(function(data) {

        // Select the SVG element
        var svg = d3.select(this).selectAll('svg').data([data]);

        // Create the SVG element on enter, set it's size
        svg.enter().append('svg')
            .attr('width', width)
            .attr('height', height);

        var component = svg.selectAll('g.component').data([data]);

        // Create the component group on enter and set its attributes
        component.enter().append('g');

        // Add other elements...

        // click listener
        component.on('click', function(d) {
            // click callback.
        });


    });
}

---

您是否在组件内部运行此代码？@Larskothoff编辑了此代码；容器附加到SVG以在图形中创建元素。@Larskothoff“在组件内部”是什么意思？很可能您有类似element.callcomponent的东西来呈现组件。这个调用是否也建立了事件监听器，或者您需要为此运行单独的代码？@Larskothoff它将建立一个事件监听器，但在实现之前，我尝试了一些简单的控制台日志，以了解如何工作。我希望所有小条形图都有一个svg。我认为问题在于动态创建的div，因为当我尝试在一个预定义的div中创建多个图表时，单击所有图表的函数就可以了。我附上了一把小提琴。任何帮助都将不胜感激！