D3中用于水平堆积条形图的交互式图例

Question

在D3门户网站上引用多个示例后，我创建了一个水平堆叠的条形图。我打算实现以下目标

1. 图表上的工具提示
2. 鼠标悬停在图例上以突出显示相应的数据

3. 鼠标点击图例到
   3.1。更改图例的不透明度（取消选择效果）

   3.2。根据选择过滤数据

   3.3。具有过渡效果

能够获得＃1，＃2＆amp; ＃3.1要求满足除＃3.2＆amp; ＃3.3即基于具有过渡效果的图例选择的数据过滤。

这里是示例代码，我在点击图例时需要有关数据过滤和转换代码的帮助。 Plunker

上的完整代码

.on("click", (function(d){
var y = "sqbar color-" + color(d).substring(1);
console.log("Class =" + y);
var opacity  = document.getElementsByClassName(y)[0].style.opacity;
console.log ("Old opacity =" + opacity);

if (opacity === "1") {
svg.selectAll(".sqbar.color-" + color(d).substring(1)).style("opacity", "0.2");
//svg.selectAll(".rect.color-" + color(d).substring(1)).remove();
}
else{
svg.selectAll(".sqbar.color-" + color(d).substring(1)).style("opacity", "1");
//svg.selectAll(".rect.color-" + color(d).substring(1)).d.enter().append();
}

opacity  = document.getElementsByClassName(y)[0].style.opacity;
console.log ("New opacity =" + opacity);
}))