dc.js复合图表切换图例在过滤后失去了透明度

Question

我已经使用此solution来获取复合折线图的切换图例，并且效果很好。 但是，在我将范围图添加到该合成图之后，取消选择的图例将失去其半透明性并变为正常状态。

如何在过滤时使取消选择的图例对象保持褪色状态？

以下是供参考的屏幕截图：

在过滤器之前： 过滤后：

这是我用于图表的代码：

SceneKit

这里是fiddle。 任何帮助表示赞赏。

Answer 1

感谢您指出这一点-我先前的回答中有一个不好的做法，我回过头来纠正了它。

将事件处理和绘制分离开来，始终具有更好的样式和更强大的功能，并且始终根据数据（而不是正在运行的事件）绘制所有内容。

如果您遵循这些做法，则代码看起来更像这样：

function drawLegendToggles(chart) {
  chart.selectAll('g.dc-legend .dc-legend-item')
    .style('opacity', function(d, i) {
      var subchart = chart.select('g.sub._' + i);
      var visible = subchart.style('visibility') !== 'hidden';
        return visible ? 1 : 0.2;
    });
}

function legendToggle(chart) {
  chart.selectAll('g.dc-legend .dc-legend-item')
    .on('click.hideshow', function(d, i) {
      var subchart = chart.select('g.sub._' + i);
      var visible = subchart.style('visibility') !== 'hidden';
      subchart.style('visibility', function() {
        return visible ? 'hidden' : 'visible';
      });
      drawLegendToggles(chart);
    })
  drawLegendToggles(chart);
}

multiLineChart
  .on('pretransition.hideshow', legendToggle);

现在，无论什么原因，无论何时重绘复合图表及其图例，图例中的所有项目都会根据相应的子图表是否被隐藏而进行更新。

事件处理程序仅关注隐藏和显示图表，而不涉及绘图。

Fork of your fiddle。