dc.js 合成图切换图

Question

有没有办法在复合图表中切换图表on/off？

如果我将鼠标悬停在图例上，相应的图表会突出显示，但如果我们可以选择要显示的图表（hide/show 带有图例、复选框等）就更好了。

我确实找到了对 hideStack 的参考，但我认为这不是我需要的。

有什么想法吗？

（当前 DC 版本：2.0.0-alpha.2）

Answer 1

你说得对，图例切换目前主要针对堆栈而不是复合图表的子图表。

或许可以破解图例的切换系统，但这里有一个解决方案，只是添加切换功能作为扩展。

我们将等到使用 pretransition 事件绘制图表，然后将我们自己的点击处理程序添加到每个图例项。这将使用图例项的索引为相应的子图表创建选择器，然后切换其 css 可见性：

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

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

此外，我们会将图例项目设置为半透明，以指示该项目已隐藏。

我们希望对所有项目执行此操作，而不是响应单击事件，因为将操作与绘图分开并根据数据进行绘图更加可靠。特别是，这处理了其他原因（例如外部过滤或缩放事件）导致图例重绘的情况。

dc.js 合成图切换图

dc.js composite chart toggle chart

dc.js