问题
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)
回答1:
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.
来源：https://stackoverflow.com/questions/39834207/dc-js-barchart-click-on-x-axis-ticks-and-labels