dc scatter plot binding onClick event

Question

I am using dc.scatterPlot .. Not able to find how can I bind mouse on click to different symbols (data points) in scatter plot. I think I should first access _symbol and then set attribute, but it seems like there is no way to access _symbol of scatter plot or may be I am getting this completely wrong.

Please suggest.

var individualEventchart = dc.seriesChart("#event-individual-chart");
var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes);
var symbolAccessor = function(d) { return symbolScale(d.key[0]); };
var subChart = function(c) {
    return dc.scatterPlot(c)
    .symbol(symbolAccessor)
    .symbolSize(8)
    .highlightedSize(10)
};

individualEventchart
.margins({top: 25, right: 30, bottom: 30, left: 40})
.width(882)
.height(250)
.chart(subChart)
.x(d3.scale.linear().domain([0,24]))
.brushOn(false)
.yAxisLabel("Severity")
.xAxisLabel("Time of the day")
.elasticY(true)
.dimension(individualDimension)
.group(individualGroup)
.mouseZoomable(false)
.seriesAccessor(function(d) {return d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return d.value;})
.legend(dc.legend().x(450).y(0).itemHeight(20).gap(5).horizontal(1).legendWidth(540).itemWidth(150));

Gordon · Answer 1 · 2017-02-08T16:19:53.843

3

Using dc.js doesn't stop you from using d3, it just sets stuff up for you.

So once you have your chart you can use dc.selectAll to get a d3 selection of svg elements in the chart, and then d3.on to attach event handlers to the selection.

Even better, ~~put it in a renderlet~~ so that the handlers get updated when the chart does.

EDIT: renderlets have been deprecated in favor of events, and the pretransition event is usually better than the renderlet event.

Here's example code:

plot.on('pretransition', function() {
    plot.selectAll('path.symbol').on('click', function(d) {
         // do something here; d contains the data for the clicked symbol
    });
});

edited Feb 08 '17 at 16:19

answered Mar 31 '14 at 21:15

Gordon

19,811
4
36
74

2

Hi Gordon, Thanks a lot for replying. I am not able to get this working. So it is something like every data point has an ID associated with it and on click I want to print all the information of that point on the page. When you say dc.select followed by d3.on .. can you please please give a a very simple example on how to do this. sorry to bother you. – Andy897 Apr 01 '14 at 14:56
Hi Gordon, if you have a moment to look, I posted this further (related) question: http://stackoverflow.com/questions/42149593/dc-linechart-pop-up-datapoint-info-on-click – crashwap Feb 10 '17 at 00:42

score 1 · Answer 2 · answered Aug 07 '14 at 20:17

The other answer is correct, but here is a code example of how to do it, start with your dc chart:

dc.dataGrid(".dc-data-grid").dimension(name).group(function (d) {
               ... etc ...

Then add:

.renderlet(function (grid) {grid.selectAll(".dc-grid-item").on('click', function (d) { MyPopupFunction(d); });

dc scatter plot binding onClick event

2 Answers2

Linked