Question

我一直在尝试使用D3为图表添加一些交互性，但是基于HTML中的列表标记。

我想要的是，当人们将列表项目（巴西，美洲，非洲等）悬停在要突出显示的点上时，如opacity: 1;或fade效果，会突出显示非洲大陆的内容当我悬停他们的名字时的点。

我尝试使用以下简短代码段的变体，这对我来说过去很简单：

    cell.append("circle")
  .attr("r", 4)
  .attr("cx", function(d) { return d.data.x; })
  .attr("cy", function(d) { return d.data.y; })
  .attr("fill",function(d) { if(d.data.id === "Brasil")return "#000";      
  if(d.data.region === "África")return "rgba(255, 224, 102, 0.4)"; 
  if(d.data.region === "Americas")return "rgba(112, 193, 179, 0.4)"; 
  if(d.data.region === "Europa")return "rgba(36, 123, 160, 0.4)";
  if(d.data.region === "Ásia")return "rgba(250, 166, 26, .4)";if(d.data.region === "Oceânia")return "rgba(141, 153, 174, 0.4)"})
  ;

  d3.selectAll(".legenda")
 .on("mouseover", function (d) {
 d3.select (d.region)
 .style("opacity", 1);
 })
 .on("mouseout", function (d) {
 d3.selectAll(".legenda")
 .style("opacity", .4);
 });

在这种情况下，我还没弄清楚如何与数据绑定。

Answer 1

当你写：

d3.select(d.region);

您没有选择任何圈子（除此之外，如果您选择多个圈子，它应该是selectAll，因为select只选择它找到的第一个元素。）

但好消息是有几种方法可以做你想要的。当你创建圆圈时，其中一个是根据非洲大陆开设的课程：

cell.append("circle")
  .attr("class", function(d){ return d.data.region})

然后，您可以选择属于该类的所有圈子，并按照您想要的方式应用不透明度：

d3.selectAll(".legendas")
    .on("mouseover", function (d) {
    var thisContinent = this.id;
    d3.selectAll("circle").attr("opacity", 0);
    d3.selectAll("." + thisContinent).attr("opacity", 1);
}).on("mouseout", function(){
    d3.selectAll("circle").attr("opacity", 1);
});

为了实现这一目标，我将li标记的类更改为“legendas”（因为它被触发两次，一次针对li，一次针对ul）。

以下是codepen：http://codepen.io/anon/pen/regYyw

使用D3 v4在beeswarm中列出标签的广告互动

1 个答案: