Javascript 退出选择不起作用

我正在尝试进入，更新和退出我的绘图功能的工作。尽管我在尝试使出口正常工作时遇到问题，但“输入”和“更新”仍然有效

代码如下：

            var draw = function () {
            var drawData = function (dat, className, baseFill, area) {

                //var selection (supermarket)
                var supermarket, supermarketEnter;
                supermarket = svg.selectAll('.' + className)
                    .data(dat,
                        function (c) {
                            return c.Vendor;
                        });

                //var new selection (supermarketEnter)
                supermarketEnter = supermarket.enter()
                    .append('g')
                    .attr('class', className)
                    .attr('data-vendor', function (d) { return d.Vendor; })
                    .attr('width', width)
                    .attr('height', height);
                supermarketEnter.append('path');

                //update new selection
                supermarketEnter
                    .attr('clip-path', 'url(#clipper)')
                    .attr('class', 'line')
                    .attr('id', function (d) { return d.Vendor; });

                supermarket.select('path')
                    .transition()
                    .attr('class', 'lines-data')
                    .attr('fill', 'none')
                    .duration(500)
                    .attr('d',
                        function (d) {
                            return line(d.Values);
                        });

                var path = supermarket.select('path')
                .style('stroke', function (d, i) {
                    return (d.Visible ? baseFill(d.Index) : grayFill);

                });
                if (area) {
                    path.style('fill', function (d, i) { return (d.Visible ? baseFill(d.Index) : grayFill); });

                }

                supermarketEnter
                    .selectAll("circle")
                    .data(function (d) {
                        return d.Values;
                    })
                        .enter()
                        .append('circle')
                        .attr('class', 'datapoint')
                        .attr('r', 4)
                        .style('fill',
                            function (d, i, j) {
                                return dat[j].Visible ? baseFill(j) : grayFill;
                            })
                        .attr('transform',
                            function (d) {
                                return 'translate(' + x(d.Month) + ',' + y(d.Value) + ')';
                            })
                        .on('mouseover',
                            function (d, i, j) {

                                d3.select('.tooltip')
                                    .style('opacity', '1');
                                d3.select('.tooltip')
                                    .html(dat[j].Vendor + '<br/> (' + moment(d.Month).format("MMM YYYY") + ', ' + d.Value.toPrecision(2) + '% )')
                                    .style('left', function () {
                                        var newWidth = d3.event.pageX - ($(chartEl).width() / 10) + 'px';
                                         if (window.innerWidth >= 1200) {
                                           var  newWidth = d3.event.pageX - ($(chartEl).width() / 2) + 'px';
                                        }
                                        return newWidth;
                                    })
                                    .style('top', (d3.event.pageY) - 300 + 'px');


                            })
                        .on("mouseout",
                            function (d) {

                                d3.select('.tooltip')
                                    .style('transition', '500')
                                    .style('opacity', 0)
                                    .style('color', d3.select(this).style('fill'));
                            });


                supermarket.exit().remove();
                supermarket.order();

                return zoomBeh.x(x);
            }

            svg.selectAll('.x.axis').call(xAxis);
            svg.selectAll('.y.axis').call(yAxis);


            drawData(chartData, 'supermarket', patterns, false);

        };

var draw=函数（）{
var drawData=函数（dat、类名、基填充、面积）{
//风险值选择（超市）
var超市、超级市场中心；
supermarket=svg.selectAll（'.'+className）
.数据（dat，
职能（c）{
返回c.供应商；
});
//var新选择（超级市场中心）
supermarketEnter=supermarket.enter（）
.append（'g'）
.attr（'class'，className）
.attr（'data-vendor'，函数（d）{返回d.vendor；}）
.attr（'width'，width）
.attr（'高度'），高度；
supermarketEnter.append（'path'）；
//更新新选择
超级市场中心
.attr（'clip-path'，'url（#clipper'））
.attr（'类'，'行'）
.attr（'id'，函数（d）{返回d.Vendor；}）；
超市。选择（'路径'）
.transition（）
.attr（'类'，'行数据'）
.attr（'填充'，'无'）
.持续时间（500）
.attr（'d'，
职能（d）{
返回线（d值）；
});
var path=supermarket.select（'path'）
.风格（“笔划”，功能（d，i）{
返回（d.可见？基本填充（d.索引）：灰色填充）；
});
如果（区域）{
style（'fill'，函数（d，i）{return（d.Visible？baseFill（d.Index）：grayFill）；}）；
}
超级市场中心
.selectAll（“圆圈”）
.数据（功能（d）{
返回d.值；
})
.输入（）
.append（'圆'）
.attr（'class'，'datapoint'）
.attr（'r'，4）
.style（'填充'，
函数（d，i，j）{
返回数据[j]。可见？基本填充（j）：灰色填充；
})
.attr（'transform'，
职能（d）{
返回“translate”（'+x（d.Month）+'，'+y（d.Value）+'）；
})
.on（'mouseover'，
函数（d，i，j）{
d3.选择（“.tooltip”）
.style（'opacity'，'1'）；
d3.选择（“.tooltip”）
.html（dat[j].Vendor+'
（'+矩（d.Month）.format（“MMM-YYYY”）+'，'+d.Value.toPrecision（2）+'%））
.style（'left'，function（）{
var newWidth=d3.event.pageX-（$（chartEl.width（）/10）+“px”；
如果（window.innerWidth>=1200）{
var newWidth=d3.event.pageX-（$（chartEl.width（）/2）+“px”；
}
返回新宽度；
})
.style（'top'，（d3.event.pageY）-300+'px'）；
})
.on（“mouseout”，
职能（d）{
d3.选择（“.tooltip”）
.style（'transition'，'500'）
.style（'opacity'，0）
.style（'color'，d3.select（this.style（'fill'））；
});
supermarket.exit（）.remove（）；
超市订单（）；
返回zoomBeh.x（x）；
}
svg.selectAll（'.x.axis'）.call（xAxis）；
svg.selectAll（'.y.axis'）.call（yAxis）；
drawData（chartData，‘超市’、图案、假）；
};

您的“退出”选择基于此块，该块绑定数据：

supermarket = svg.selectAll('.' + className)
    .data(dat, function(c){
        return c.Vendor;
    });

注意这一部分：

选择全部（'...+className）

。在这里，我们选择名为

.className

的类的所有元素（无论

className

是什么字符串），并将数据绑定到它们

继续：最初，您的“输入”选择正确设置了类：

supermarketEnter = supermarket.enter()
    .append('g')
    .attr('class', className)

但是，在下面的几行中，您可以这样做：

supermarketEnter
    .attr('class', 'line')

然后覆盖

.className

类

因此，退出选择总是空的，因为不再有名为

className

的类

演示：

选择正确的选项，检查第一个代码段。您可以确认“进入”和“退出”选项都有效：

var svg=d3.选择（“svg”）；
setInterval（函数（）{
var数据=d3.range（数学随机（）*20）；
绘制（数据）；
}, 1000);
函数图（数据）{
var circles=svg.selectAll（“.someClass”）
.数据（数据）；
var circleCenter=circles.enter（）.append（“圆”）
.attr（“类”、“某类”）
.attr（“cx”，（d，i）=>10+i*15）
.attr（“cy”，50）
.attr（“r”，5）
.attr（“填充”、“teal”）；
var circlesUpdate=circles.attr（“cx”，（d，i）=>10+i*15）；
var circlesExit=circles.exit（）.remove（）；
}