DC.JS Выбор панели по щелчку

Question

Я пытаюсь вызвать функцию на гистограмме, когда пользователь нажимает на определенную панель. Я понял, что мне нужно использовать renderlet, чтобы добавить слушателя к функции рендеринга, а затем создать группу каждой панели, на которой будет добавлено событие click.

Предполагая, что с любой общей гистограмме я называю это:

barChart.on('renderlet', function(chart, filter) 
{ 
    // TODO Select the bars here and add an on click function 
}); 

Только проблема в том, что я не могу узнать, как сделать d3.select вызова на панели с помощью этого объекта диаграммы. Я не вижу ничего похожего на бары в объекте, когда я выкидываю его.

Answer 1

Для такого рода вещей, самый простой способ узнать это просто перейти к источнику. В этом случае,

var enter = bars.enter() 
     .append('rect') 
     .attr('class', 'bar') 

https://github.com/dc-js/dc.js/blob/develop/src/bar-chart.js#L90-L92

Так селектор rect.bar. Кроме того, удобный метод chart.selectAll() лучше, чем использование d3 напрямую, потому что он будет выбирать только в текущей диаграмме.

И, наконец, чтобы избежать топинга на событиях, которые используются внутренним dc.js, вы можете захотеть, чтобы пространство имен было передано вашим обработчиком событий.

Добавление его,

barChart.on('renderlet.barclicker', function(chart, filter) 
{ 
    chart.selectAll('rect.bar').on('click.custom', function(d) { 
     // use the data in d to take the right action 
    }); 
});