Как удалить точку всплывающей подсказки после выбора различных параметров и после обновления оси в d3 v3?

Question

Я хочу обновить точку и ось как различные варианты выбора вместе с использованием всплывающих подсказок. Я выбираю значение как другую опцию и выбираю другую опцию. Этот код также может обновить строку с всплывающими подсказками, но после обновления строки точка предыдущей строки завершается, но я хочу удалить эти точки при обновлении строки.

var div = d3.select('body').append('div')

var margin = {top: 30, right: 30, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;
// var  parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
console.log(formatTime);

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    // .tickFormat(formatPct)
    .orient("left");

var line = d3.svg.line()
    .x(function (d) {
        return x(d.date);
    })
    .y(function (d) {
        return y(d.pop);
    });

var div = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var dataFiltered = {};
var dataNested = {};

d3.csv("data2.csv", function (error, data) {
        data.forEach(function (d) {
            d.date = parseDate(d.year);
            d.pop = +d.population;
            d.value = +d.days;
        });

        var dataNested = d3.nest()
            .key(function (d) {
                return d.days
            })
            .entries(data)

        div.append('select')
            .attr('id', 'variableSelect')
            .on('change', variableChange)
            .selectAll('option')
            .data(dataNested).enter()
            .append('option')
            .attr('value', function (d) {
                return d.key
            })
            .text(function (d) {
                return d.key
            })

        var dataFiltered = dataNested.filter(function (d) {
            return d.key === d3.select('#variableSelect').property('value')
        })

        x.domain(d3.extent(dataFiltered[0].values, function (d) {
            return d.date;
        }));
        y.domain(d3.extent(dataFiltered[0].values, function (d) {
            return d.pop;
        }));

        // svg.append("path")
        //     .attr("class", "line")
        //     .attr("d", line(data));

        //     svg.select("dot")
        //         .data(data)
        //         .enter().append("circle")
        //         .attr("r", 4)
        //         .attr("cx", function (d) {
        //             return x(d.date);
        //         })
        //         .attr("cy", function (d) {
        //             return y(d.pop);
        //         })

        function toolstip(div) {
            svg.selectAll("dot")
                .data(data)
                .enter().append("circle")
                .attr("r", 5)
                .attr("cx", function (d) {
                    return x(d.date);
                })
                .attr("cy", function (d) {
                    return y(d.pop);
                })
                .on("mouseover", function (d) {
                    div.transition()
                        .duration(200)
                        .style("opacity", .9);
                    div.html(formatTime(d.date) + "," + d.pop)
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                })
                .on("mouseout", function (d) {
                    div.transition()
                        .duration(500)
                        .style("opacity", 0);
                });
        }

        toolstip(div);

        // xFormat = "%d-%m-%y";
        svg.append("g")
            .attr("class", "xAxis")
            .attr("transform", "translate(0," + height + ")")
            // .call(d3.axisBottom(xAxis).tickFormat(d3.timeFormat(xFormat)));
            .call(xAxis);

        svg.append("g")
            .attr("class", "yAxis")
            .call(yAxis)
            // .call(d3.axisLeft(yAxis))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");
        // .text("Cumulative Return");

        svg.append("path")
            .datum(dataFiltered[0].values)
            .attr("class", "line")
            .attr("d", line);

        function variableChange() {
            var value = this.value;
            var dataFiltered = dataNested.filter(function (d) {
                return d.key === value
            })
            console.log(dataFiltered);
            x.domain(d3.extent(dataFiltered[0].values, function (d) {
                return d.date;
            }));
            y.domain(d3.extent(dataFiltered[0].values, function (d) {
                return d.pop;
            }));

            toolstip();
            // svg.selectAll("dot")

            d3.select('.xAxis').transition().duration(1000).call(xAxis)
            d3.select('.yAxis').transition().duration(1000).call(yAxis)
            d3.select('.line').datum(dataFiltered[0].values).attr('d', line)


        }

    }
);