Row chart functional, yet not selectable

25 views
Skip to first unread message

Robert James Liguori

unread,
May 22, 2017, 2:32:09 PM5/22/17
to dc-js user group
Is there a way to have a row chart functional, yet not selectable...

That is, it fires when other components are selected, however you cannot click on it yourself to fire events.

Thanks,
Robert

Gordon Woodhull

unread,
May 22, 2017, 2:41:53 PM5/22/17
to dc.js user group
For any charts derived from coordinateGridMixin, you should be able to use .brushOn(false)

For any chart which doesn't support this, I guess the most expedient thing to do would be remove the click events.

For example, for the heatmap this would be:

chart.on('pretransition', function() {
    chart.selectAll('rect.heat-box').on('click', null);
});

Adjust the selector for other charts, either by looking at the code or by inspecting the elements you care about in the debugger.


--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/f4e842b7-d31b-4a2a-8b47-f0b264cb278c%40googlegroups.com.

Robert James Liguori

unread,
May 22, 2017, 4:42:28 PM5/22/17
to dc-js user group
Thanks!

Since I'm still relatively new to crossfilter, how would I remove click events from the rowchart component?

Thank so much,
Robert


Robert James Liguori

unread,
May 22, 2017, 4:43:44 PM5/22/17
to dc-js user group
More so... I don't want the row charts 'clickable' at all, so I don't want a click with null... I want no click allowable.

Thanks,
Robert

Gordon Woodhull

unread,
May 22, 2017, 5:07:49 PM5/22/17
to dc.js user group
Looks like the selector would be 'g.row', so:

chart.on('pretransition', function() {
    chart.selectAll('g.row').on('click', null);
});

null disables the action - that replaces the function which was previously bound to the event. You can't stop the user from clicking anywhere, but you can disable any reaction to the click. :)

Maybe you want to remove the visual cues that invite clicking. These are controlled with CSS:
- the rects are more transparent when they are hovered
- the cursor changes to a hand/pointer over the rects

Here is some CSS you can use to disable those cues:

      .dc-chart g.row rect {
        cursor: default;
      }
      .dc-chart g.row rect:hover {
        fill-opacity: 0.8;
      }

Cheers,
Gordon



--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

Gordon Woodhull

unread,
May 22, 2017, 5:11:17 PM5/22/17
to dc.js user group
Ugh, it looks like every little element has its own click event. So it may be simpler to do:

chart.onClick = function() {};


Robert James Liguori

unread,
May 22, 2017, 5:16:16 PM5/22/17
to dc-js user group
THIS WORKED!!! Thank you so much. -- Robert
Reply all
Reply to author
Forward
0 new messages