Question

我正在使用dc.js（2.0.0-beta.32）作为几个条形图，这可能会显示其值相差2-3个数量级的条形图，使得较小值的条形几乎为零高度，几乎不可能可靠地点击。

我可以通过对条形高度使用非线性比例来以某种方式缓解这一点，尽管由于我对整个项目的数据和图表有其他限制，这并不是很有用。

通过.label()添加标签是不可行的，因为我必须在其中工作。

除非我遗漏了一些明显的东西，否则我看不到让 x轴刻度标签本身可点击的方法（而不是通过.label()添加的栏顶部的标签）：有没有办法选择列（如，栏+关联的刻度标签）？

我发现的最接近的解决方案是： https://stackoverflow.com/a/30560518/550077 虽然在我的图表布局中再次没有真正可用，其中包括40-50个窄条（这是一个很小的改进，但点击仍然不如点击刻度标签那么可靠）

Answer 1

这有点混乱，但如果您知道如何将x域映射到数据，则可以将自己的点击处理程序添加到轴中。

例如，在the filtering example上，您可以添加如下处理程序：

spendHistChart.select('.axis.x')
    .selectAll('.tick text')
    .on('click', function(d) {
        spendHistChart.replaceFilter(new dc.filters.RangedFilter(d, d+1)); 
        spendHistChart.redrawGroup();
    });

如上所述on the user group，您还需要启用pointer-events作为刻度线，因为默认情况下它们已被dc.css禁用。

请注意，上面假设一个带有线性刻度的图表。如果您正在处理序数比例，则调用可能与.replaceFilter(d)一样简单，但同样，它取决于您的x域到实际数据的映射。

dc.js barChart - 点击x轴刻度和标签

1 个答案: