利用数据生成散点图采用d3转换法

我正在尝试这样做：http://bost.ocks.org/mike/nations/

但是，我不希望在鼠标悬停时显示转换，而是希望在时间线中每年单击一个按钮时显示转换。

csv文件中的一些示例数据：

time,name,xAxis,yAxis,radius,color
1990,America,10,20.2,30,black
1990,China,50,50,50,yellow
2000,Singapore,20,30,20,red
2010,China,60,50,50,yellow
2020,America,20,30,40,black
2020,Malaysia,60,5,10,orange

我是javascript和d3的新手，在转换方面遇到了麻烦。我希望每个名字（美国、中国、新加坡、马来西亚）的圆圈都是唯一的，这样我每个名字只有一个圆圈。目前，当我点击相应的时间线按钮时，会添加新的圆圈，但不会转移到新的位置或退出。

使用d3.csv读取数据：

d3.csv("data.csv", function(dataset) {
    var years = [];
    data=dataset;
    //create a button for each year in the timeline
    dataset.forEach(function(d){
        console.log(d.time);
        //if not existing button for timeline
        if($.inArray(d.time, years) == -1)
        {
            var button = document.createElement("button");
            button.setAttribute("type", "button"); 
            button.setAttribute("class", "btn btn-default");
            button.setAttribute('onclick', 'update("'+d.time+'")');
            var t = document.createTextNode(d.time);
            button.appendChild(t);
            $("#timeline").append(button);
            years.push(d.time);
        }
    })
    //create circles for the first year 
    svg.selectAll("circles")
        .data(dataset.filter(function(d) { return d.time == d3.min(years);}, function(d) { return d.name; }))
        .enter()
        .append("circle")
        //.filter(function(d){ return d.time == d3.min(years); })
        .attr("cx", function (d) { return d.xAxis *10; })
        .attr("cy", function (d) { return d.yAxis; })
        .style("fill", function(d) { return d.color; })
        .transition()
        .duration(800)
        .attr("r", function(d) { return d.radius});
});

我的更新功能：

function update(year){
    var circle = svg.selectAll("circles")
                .data(data.filter(function(d){return d.time == year;}), function(d) { return d.name; });
    //update
    circle.attr("class", "update")
        .filter(function(d){ return d.time == year; })
        .transition()
        .duration(800)
        .attr("cx", function (d) { return d.xAxis *10; })
        .attr("cy", function (d) { return d.yAxis; })
        .attr("r", function(d) { return d.radius});

    //enter
    circle.enter().append("circle")
            .filter(function(d){ return d.time == year; })
            .attr("cx", function (d) { return d.xAxis *10; })
            .attr("cy", function (d) { return d.yAxis; })
            .style("fill", function(d) { return d.color; })
            .attr("r", function(d) { return d.radius});
    //exit
    circle.exit()
        .remove();
}

有人能给我指正确的方向吗？谢谢