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

我使用dc.js（2.0.0-beta.32）来绘制几个条形图，这可能发生在显示条的数值不同于2-3个指令使得数值较小的棒几乎为零高，这几乎不可能可靠地点击。dc.js barChart - 点击X轴刻度和标签

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

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

除非我缺少的东西很明显，我不能明白的方式，使x轴刻度标签本身可点击（而不是标签上的通过.label()加入吧顶部）：有没有什么办法，使的选择列（如条形+相关刻度标签）？

我已经找到了解决方案最接近的是这样的： https://stackoverflow.com/a/30560518/550077 虽然再没有在我的图表布局，其中包括40-50窄条真正可用（这是一个小的改进，但点击仍不可靠，因为它可以通过点击在勾号标签上）

来源

2016-10-03 hotzeplotz

好主意。有两件事情并不简单：轴由d3绘制，而不是由dc.js绘制，因此我们必须选择由其他库创建的元素。此外，只有序号图才能保证每个栏会有一个勾号。 – Gordon

这是一种混乱，但如果您知道如何将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域到实际数据的映射。

来源

2016-10-24 17:04:37 Gordon

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

回答

相关问题