dc.js barChart-单击x轴刻度和标签 [英] dc.js barChart - click on x-axis ticks and labels

问题描述

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

我可以通过使用非线性标尺的高度来缓解这种情况，尽管由于我对整个项目中的数据和图表存在其他限制，这并没有真正的用处.

通过 .label()添加标签也不可行，因为我必须处理其中的布局.

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

我找到的最接近的解决方案是: https://stackoverflow.com/a/30560518/550077 尽管在包含40至50条窄条的图表布局中仍然不能真正使用(这是一个很小的改进，但是单击仍然不如单击刻度标签可靠)

解决方案

有点麻烦，但是如果您知道如何将x域映射到数据，则可以将自己的点击处理程序添加到该轴上.

例如，在过滤示例上，您可以添加这样的处理程序:

  spendHistChart.select('.axis.x').selectAll('.tick text').on('click'，function(d){ExpenseHistChart.replaceFilter(new dc.filters.RangedFilter(d，d + 1));花样年鉴.redrawGroup();}); 

在用户组上 a>，您还需要为记号启用 pointer-events ，因为默认情况下dc.css禁用了它们.

请注意，以上假设是线性比例尺的图表.如果您要处理序数刻度，则调用可能像 .replaceFilter(d)一样简单，但同样，它取决于从x域到实际数据的映射.

i am using dc.js (2.0.0-beta.32) for several bar charts, which may happen to display bars whose values differ of 2-3 orders of magnitude, making smaller values' bars almost zero-height, which are almost impossible to click reliably.

i can somehow mitigate this by using a non-linear scale for the bars' height, though this is not really useful because of other constraints i have on data and charts across the project.

adding labels via .label() is not doable either because of the layout i have to work within.

unless i am missing something obvious, i can't see a way to make the x axis tick labels themselves clickable (rather than labels on top of bars added via .label()): is there any way to make selection of columns (as in, bar + associated tick label)?

the closest solution i have found is this: https://stackoverflow.com/a/30560518/550077 though again not really usable in my chart layout which includes 40-50 narrow bars (it's a small improvement but clicking is still not as reliable as it could be by clicking on tick labels)

解决方案

It's kind of messy, but if you know how to map the x domain to your data, you can add your own click handlers to the axis.

For example, on the filtering example, you can add a handler like this:

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

As noted on the user group, you'll also need to enable pointer-events for ticks, since they're disabled by dc.css by default.

Note that the above assumes a chart with a linear scale. If you're dealing with an ordinal scale, the call may be as simple as .replaceFilter(d), but again, it depends on the mapping from your x domain to your actual data.

这篇关于dc.js barChart-单击x轴刻度和标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！