D3.js 在D3可视化中两次表示同一项目

我要在基于地图的可视化中实现的效果是：

• 地图上的红色圆圈表示数据（位置上的事物）
• 当某个位置发生了什么事情时，我们会短暂地（2秒）显示另一个蓝色圆圈在顶部逐渐消失

我正试图在D3模式下解决这个问题。具体来说：如何将同一事物表示两次

我遇到的问题是，当我尝试向给定的SVG画布组添加相同的数据集两次时，没有添加任何内容。也就是说，使用如下代码：

g = svg.append("g");

var feature = g.selectAll("circle")
  .data(stations)
  .enter().append("circle")
  .style("stroke", "black")  
  .style("opacity", .6) 
  .style("fill", "red")
  .attr("r", function(d, i) { return d.free_bikes; });  

var emphasis = g.selectAll("circle")
  .data(stations)
  .enter().append("circle")
  .style("stroke", "black")  
  .style("opacity", .6) 
  .style("fill", "blue")
  .attr("r", function(d, i) { return d.free_bikes; });  

此解决方案是可行的，但很麻烦，并且可能会限制：

g2 = svg.append("g");
var emphasis = g2.selectAll("circle")

也就是说，将第二组元素添加到另一个SVG组。

我终于（某种程度上）找到了答案。根据规则，这两组数据被视为一个，因为它们共享同一个密钥。因此，一个简单的方法是为每个集合指定一个不能重叠的关键点：

var feature = g.selectAll("circle")
  .data(stations, function (d) { return d.id; } )
  .enter().append("circle")
  .style("stroke", "black")  
  .style("opacity", .6) 
  .style("fill", "red")
  .attr("r", function(d, i) { return d.free_bikes * 1; });  

var emphasis = g.selectAll("notathing")
  .data(stations, function (d) { return d.id + " cannot possibly overlap"; } )
  .enter().append("circle")
  .style("stroke", "black")  
  .style("opacity", .6) 
  .style("fill", "blue")
  .attr("r", function(d, i) { return d.free_bikes * 1; });  

---

唯一的小怪癖是我必须修改第二个选择器（

g.selectAll（“notathing”）

），使其与第一个选择器创建的任何圆都不匹配。

正确的方法是使用类来选择圆（并在创建圆时应用该类）。因此，您可以创建如下功能：

var feature = g.selectAll("circle.feature")
  .data(stations, function (d) { return d.id; } )
  .enter().append("circle")
  .attr("class", "feature") // <- assign the class
  ....

var-feature=g.selectAll（“圆形特征”）
.data（站，函数（d）{返回d.id；}）
.enter（）.append（“圆”）
.attr（“类”、“功能”）//太好了，这是我错过的最后一点。非常感谢！！这个解决方案最适合我的问题！！！但是为什么“notashing”起作用，难以置信
var feature = g.selectAll("circle.emphasis")
  .data(stations, function (d) { return d.id; } )
  .enter().append("circle")
  .attr("class", "emphasis") // <- assign the class
  ....