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

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

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

dc.js复合图表切换图表

1 个答案: