在D3门户上引用多个示例后，我创建了一个水平堆叠的条形图 . 我打算实现以下目标
-
图表上的工具提示
-
鼠标悬停在图例上以突出显示相应的数据
-
鼠标点击图例到
3.1 . 更改图例的不透明度（取消选择效果）
3.2 . 根据选择过滤数据
3.3 . 具有过渡效果
除了＃3.2和＃3.3之外，能够满足＃1，＃2和＃3.1要求，即基于具有过渡效果的图例选择的数据过滤 .
这是示例代码，在单击图例时我需要有关数据过滤和转换代码的帮助 . 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);
}))