dc.js barChart - нажмите на пометки и метки по оси x

Question

Я использую dc.js (2.0.0-beta.32) для нескольких гистограмм, что может случиться, чтобы отображать столбцы, значения которых различаются в 2-3 порядка от величины баров меньших значений почти нулевой высоты, которые почти невозможно надежно нажимать.

Я могу как-то смягчить это, используя нелинейный масштаб для высоты баров, хотя это не очень полезно из-за других ограничений, которые у меня есть на данных и диаграммах по всему проекту.

добавление ярлыков через .label() не выполнимо ни из-за макета, я должен работать внутри.

, если я не имею что-то очевидное отсутствую, я не могу видеть способ сделать клещ оси х этикеток самого интерактивным (а не метки на вершине баров, добавленных через .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 с вашими фактическими данными.