dc.js 复合图表切换图表

Question

有没有办法在复合图表中打开/关闭图表？

如果我将鼠标悬停在图例上，相应的图表会突出显示，但如果我们可以选择要显示的图表(使用图例隐藏/显示、复选框等)就更好了。

我确实找到了对 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);

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

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