nvd3 захват события клика на диаграмме с накоплением

Question

Я пытаюсь зафиксировать событие клика на диаграмме с накоплением nvd3. Я могу захватить всплывающие подсказки показать события скрытия всплывающей подсказки. Я хочу записать событие клика и получить информацию о точке клика. Пожалуйста помоги. PLUNKER_LINK

мой вариант графика:

chart: {
                type: 'stackedAreaChart',
                height: 450,
                x: function (d) { return d[0]; },
                y: function (d) { return d[1]; },
                showValues: true,
                valueFormat: function (d) { return d3.format(',.4f')(d); },
                dispatch: {
                    tooltipShow: function (e) { console.log('! tooltip SHOW !') },
                    tooltipHide: function (e) { console.log('! tooltip HIDE !') },
                    beforeUpdate: function (e) { console.log('! before UPDATE !') },
                    elementClick: function (e) { alert('clicked');}

                }
            }
        };

Answer 1

Вы должны обернуть dispatch блок в stacked блок:

stacked: {
    dispatch: {
        tooltipShow: function (e) { console.log('! tooltip SHOW !') },
        tooltipHide: function (e) { console.log('! tooltip HIDE !') },
        beforeUpdate: function (e) { console.log('! before UPDATE !') },
        elementClick: function (e) { alert('clicked');}
    }
}

Но при этом вы все равно не сможете получить elementClickпотому что слой сложенного графика просто не отправит его. Вместо этого вы можете получить areaClick событие, но оно срабатывает только при нажатии внутри области с накоплением.

Поэтому я бы порекомендовал вам перехватывать события отправки из "интерактивного" слоя. Просто сделайте это так:

chart: {
    type: 'stackedAreaChart',
    ...
    interactiveLayer: {
        dispatch: {
            elementMousemove: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            },
            elementClick: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            }
        }
    }
}