使用数据生产与D3的过渡方法散点图

Question

我试图做这样的事情：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(); 
} 

有人能指出我在正确的方向？谢谢。

Answer 1

svg.selectAll("circles")无效，应该变成svg.selectAll("circle")（singularize“circles”）。

当你拥有它目前，与"circles"，则产生了一个空的选择，所以D3假定所有的数据绑定到不存在的圈子，因此.enter()选择总是充满了（而不是仅在第一感十足渲染）。

接下来，在标记为//update的部分中，您不需要执行任何过滤。您正在对已过滤数组执行的绑定.data()应该为您处理此问题。

此外，标记为//create circles for the first year的部分是不必要的，可能应该删除以消除副作用错误。 update()功能，假设它工作正常，应该为你照顾这个。