dc.js 复合图表 切换图表

Question

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

如果我将鼠标悬停在 Legend 上，相应的图表会突出显示，但如果我们可以选择显示哪些图表（隐藏/显示与 Legend、复选框等），那就太好了。

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

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

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