Chart selectors

When customizing dc.js charts to add new behaviors or decorations, it can be useful to know the right selectors for the chart content. Here is an incomplete list; please feel free to edit this page to add other selectors!

For example, if you want to add a click handler to a pie chart slice, you might do:

pieChart.selectAll(`g.pie-slice`).on('click.my-click-event', function(d) {
    console.log('clicked on slice with datum', d);
});

Often there's a group element <g> which wraps the visual element and other stuff; in those cases, you'll usually want to select the group element using the Selector column for events or annotations, or use the Visual Element selector for stylistic changes.

Chart	Item	Selector	Visual Element
dc.barChart	bar	rect.bar
dc.bubbleChart dc.bubbleOverlay	bubble	g.node	circle.bubble
dc.heatMap	rect	rect.heat-box
dc.pieChart	slice	g.pie-slice	g.pie-slice path
	label	text.pie-label
dc.rowChart	row	g.row	g.row rect