javascript - 退出选择不起作用

Question

我正在尝试输入、更新和退出来处理我的绘图函数。尽管我在尝试让退出正常工作时遇到问题，但输入和更新工作正常。

这是代码:

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

        };

Answer 1

您的“退出”选择基于此 block ，它绑定(bind)了数据:

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

注意这部分:selectAll('.' + className)。在这里，我们选择具有名为 .className 的类(无论 className 是什么字符串)的所有元素，并将数据绑定(bind)到它们。

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

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

但是，在下面的几行中，你可以这样做:

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

并且您覆盖 .className 类。

因此，您的退出选择始终为空，因为不再有名为 className 的类。

演示:

检查第一个片段，选择是否正确。您可以看到“进入”和“退出”选择都有效:

var svg = d3.select("svg");

setInterval(function(){
var data = d3.range(Math.random()*20);
draw(data);
}, 1000);

function draw(data){

var circles = svg.selectAll(".someClass")
	.data(data);
	
var circlesEnter = circles.enter().append("circle")
	.attr("class", "someClass")
	.attr("cx", (d,i)=> 10 + i*15)
	.attr("cy", 50)
	.attr("r", 5)
	.attr("fill", "teal");
	
var circlesUpdate = circles.attr("cx", (d,i)=> 10 + i*15);

var circlesExit = circles.exit().remove();

}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

现在，相同的代码，但覆盖初始类:

circlesEnter.attr("class", "foo");

您可以看到“退出”选择不再起作用。这是一个损坏的代码:

var svg = d3.select("svg");

setInterval(function(){
var data = d3.range(Math.random()*20);
draw(data);
}, 1000);

function draw(data){

var circles = svg.selectAll(".someClass")
	.data(data);
	
var circlesEnter = circles.enter().append("circle")
	.attr("class", "someClass")
	.attr("cx", (d,i)=> 10 + i*15)
	.attr("cy", 50)
	.attr("r", 5)
	.attr("fill", "teal");
	
circlesEnter.attr("class", "foo");
	
var circlesUpdate = circles.attr("cx", (d,i)=> 10 + i*15);

var circlesExit = circles.exit().remove();

}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>