Chart selectors - dc-js/dc.js GitHub Wiki

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.boxPlot	dot	circle.data
	dot	circle.outlierBold
	dot	circle.outlier
	box	rect.box
dc.bubbleChartdc.bubbleOverlay	bubble	g.node	circle.bubble
dc.dataTable	row	tr.dc-table-row
	section header	tr.dc-table-section or tr.dc-table-group
	cell	td.dc-table-column
	column header	th.dc-table-head
dc.lineChart	line	path.line
	area fill	path.area
	dot	circle.dot
dc.pieChart	slice	g.pie-slice	g.pie-slice path
	label	text.pie-label
dc.rowChart	row	g.row	g.row rect
dc.scatterPlot	dot/symbol	path.symbol