D3.js D3中用于水平堆叠条形图的交互式图例

在参考了门户上的多个示例后，我创建了一个水平堆叠的条形图。我开始实现以下目标

图表上的工具提示

鼠标悬停在图例上以突出显示相应的数据

用鼠标单击图例以
3.1. 更改图例的不透明度（取消选择效果）

3.2。基于选择过滤数据

3.3。具有过渡效应

能够满足#1、#2和#3.1的要求，但#3.2和#3.3除外，即基于图例选择和过渡效果的数据过滤

这里是示例代码，我需要在单击图例时获得有关数据筛选和转换代码的帮助。在上完成代码

---

当你说你想按选择过滤时，你到底想做什么？您是否希望减少除所选内容之外的所有内容的不透明度，使其看起来淡入背景。还是确实要删除未选中的内容？我对d3很陌生，我只知道v4而不知道v3。这可能有用。还有这个例子，在这个例子中，你可以点击图例来删除除你的选择之外的所有内容。@ofey根据图例中选择的内容，我想从图表中删除相应的数据。其余数据应在图表中进行调整和转换。图例中选择的不透明度降低，以给人以取消选择效果的印象。如果图例选择位于不透明度降低的图例项上，则应将数据添加回图表。您可以使用dc.js筛选数据，但据我所知，这仅适用于d3 v3。我没有试着去做你想做的事情，但是我会在draw（）函数中创建一个图形。这将允许您在过滤数据后向其传递不同的数据，即删除选定的图例类别。您将需要使用更新模式来输入（）和退出（）以及删除（）数据。请看Bostock的更新模式示例，这里是我自己尝试将更新模式应用于条形图的一个例子，当您说要按选择进行筛选时，您希望发生什么？您是否希望减少除所选内容之外的所有内容的不透明度，使其看起来淡入背景。还是确实要删除未选中的内容？我对d3很陌生，我只知道v4而不知道v3。这可能有用。还有这个例子，在这个例子中，你可以点击图例来删除除你的选择之外的所有内容。@ofey根据图例中选择的内容，我想从图表中删除相应的数据。其余数据应在图表中进行调整和转换。图例中选择的不透明度降低，以给人以取消选择效果的印象。如果图例选择位于不透明度降低的图例项上，则应将数据添加回图表。您可以使用dc.js筛选数据，但据我所知，这仅适用于d3 v3。我没有试着去做你想做的事情，但是我会在draw（）函数中创建一个图形。这将允许您在过滤数据后向其传递不同的数据，即删除选定的图例类别。您需要使用更新模式来输入（）和退出（）以及删除（）数据

.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);
}))