Question

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

地图上的红色圆圈表示数据（位置处的东西）
当某个地方发生某些事情时，我们会短暂地（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组。

Answer 1

我终于（有点）想通了。根据{{3}}的规则，这两组数据被视为一组，因为它们共享相同的密钥。因此，一个简单的方法是为每个集合提供一个不能重叠的密钥：

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")），因此它不会与第一个选择器创建的任何圆圈相匹配。

Answer 2

执行此操作的正确方法是使用类来选择圆（并在创建时应用该类）。所以你创建了这样的功能：

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("circle.emphasis")
  .data(stations, function (d) { return d.id; } )
  .enter().append("circle")
  .attr("class", "emphasis") // <- assign the class
  ....

在D3可视化中两次表示相同的项目

2 个答案: