Javascript图表事件不适用于D3js

我在d3图表上有一个鼠标事件,但无法正常工作,并且在控制台中没有出现任何错误。我正在尝试减少一些代码,因此我将代码拆分为不同的文件,并且几乎所有其他东西都工作正常。我的代码结构是这样的:

d3.text('data.csv', function(error, raw){
    var dsv = d3.dsvFormat(';')
    data = dsv.parse(raw)
    //do some stuff here
    updates('Todos')
    function updates(selectedGroup) {
        svg.selectAll("rect").remove()

        if (selectedGroup!='Todos'){
            dataFilter = result.filter(function(d){return d.group==selectedGroup});
            subgroups = Object.keys(dataFilter[0]).slice(1);
        }else {
            dataFilter=result
        subgroups=Object.keys(cat);
        }

        var rectG = svg.selectAll('rect')
            .data(dataFilter);

        rectG.exit().remove();

        rectG.enter()
            .append("g")
            .attr("transform", function(d) {return "translate(" + x(d.group) + ",0)"; })
            .selectAll("rect")
            .data(function(d) { return subgroups.map(function(key) {return {key: key, value: d[key]}; }); })
            .enter().append("rect")
            .attr("x", function(d) { return xSubgroup(d.key); })
            .attr("y", function(d) { return y(d.value? d.value : 0); })
            .attr("width", xSubgroup.bandwidth())
            .attr("height", function(d) { return height - y(d.value? d.value : 0); })
            .attr("fill", function(d) { return color(d.key); });


        rectG.on('mouseover', function(d) {
            tooltip.select('.label').html(d.key);
            tooltip.select('.percent').html("Municipios:"+d.value);
            tooltip.style('display', 'block');
        });

        rectG.on('mousemove', function(d) {
            tooltip.style('top', (d3.event.layerY - 50) + 'px')
            .style('left', (d3.event.layerX - 25) + 'px');
        });

         rectG.on('mouseout', function() { 
            tooltip.style('display', 'none');    
        });  
   }
})

I have a live example here

评论