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

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

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