在d3中更新数据时更改“标题”的工具提示

Question

当我想更新数据并更改图片时发生。
最初，我创建了许多矩形，如下所示：

rects = groups.selectAll("rect")
                .data(function(d) { return d; })
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                    return xScale(i);
                })
                .attr("y", function(d) {
                    return yScale(d[1]);
                })
                .attr("height", function(d) {
                    return yScale(d[0]) - yScale(d[1]);
                })
                .attr("width", xScale.bandwidth())
                .append("title")
                .text(function (d) {
                    var rect = this.parentNode;// the rectangle, parent of the title
                    var g = rect.parentNode;// the g, parent of the rect.
                    return d.data.Year + ", " + d3.select(g).datum().key + "," + (d[1]-d[0]);
                });

在这里，我添加了一个工具提示，以在光标位于矩形上时显示一些信息。在这里它可以正常工作，但是当我按以下方式更新数据时：

groups.data(series);
            var use = groups.selectAll("rect")
                .data(function (d) {
                    return d;
                });
                //update
                use.transition()
                .delay(function (d,i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("x", function(d, i) {
                    return xScales(i);
                })
                .attr("y", function(d) {
                    return yScales(d[1]);
                })
                .attr("height", function(d) {
                    return yScales(d[0]) - yScales(d[1]);
                })
                .attr("width", xScales.bandwidth());
                //enter
                use.enter()
                .append("rect")
                .transition()
                .delay(function (d,i) {
                    return i * 50;
                })
                .duration(1000)
                .attr("x", function(d, i) {
                    return xScales(i);
                })
                .attr("y", function(d) {
                    return yScales(d[1]);
                })
                .attr("height", function(d) {
                    return yScales(d[0]) - yScales(d[1]);
                })
                .attr("width", xScales.bandwidth());
                //exit
                use.exit()
                    .transition()
                    .delay(function (d,i) {
                    return i * 50;
                })
                    .duration(1000)
                    .remove();
            groups.selectAll("rect")
                        .append("title")
                        .text(function (d) {
                            var rect = this.parentNode;// the rectangle, parent of the title
                            var g = rect.parentNode;// the g, parent of the rect.
                            return d.data.Year + ", " + d3.select(g).datum().key + "," + (d[1]-d[0]);
                        });

使用控制台，我知道append()是在元素上附加一个title，所以当我更新数据时，它仅显示第一个标题，即未包含的信息。更新，因此不正确。那我该怎么做呢？
奇怪的是，当我使用控制台删除标题时，它仍会显示刚刚删除的标题。是什么原因？