Nvd3.js: невозможно связать событие onClick с точками данных в svg

Я пытаюсь связать datapoints с событием onclick, чтобы я мог отображать оверлейный блок с некоторыми дополнительными деталями и ссылками. Я использую класс .nv-point для доступа к datapoints. Проблема в том, что я не могу зарегистрировать событие onclick для этих datapoints.

Вот код:

d3.selectAll(".nv-point").on("click",function(){
    alert("clicked");
    //do something more
});

Вот демо в jsFiddle

Ответы

Ответ 1

Вы можете легко привязать обработчик кликов к "кругу" или node точке в строкеChart следующим образом:

 chart.lines.dispatch.on('elementClick', function(e) {
     alert("You've clicked on " + e.series.key + " - " + e.point.x);
 });

В приведенном выше примере это покажет ключ (строки) и точное значение x node, на которое вы нажали. Мне очень полезно установить точку останова в строке оповещений и использовать инструменты разработчика Chrome/FF/etc, осмотреть объект e, чтобы вы могли точно видеть, какие данные доступны и как получить к нему доступ.

Ответ 2

После долгих размышлений это, похоже, работает для меня:

d3.select("#mainGraph svg").selectAll(".nv-point").style("pointer-events", "all").on("click", function( e ) { console.log( JSON.stringify( e ) ); });

В принципе, разница между тем, что я сделал, и тем, что вы изначально пытались, это просто сбросить переопределение таблицы стилей, чтобы включить указатели-события, то есть стиль ( "указатель-события", "все" ). `

Ответ 3

Строка линии выполняется с помощью строк svg, которые имеют класс nv-line. Вилка вашего оригинального jsFiddle находится здесь: http://jsfiddle.net/pnavarrc/qzwkn/1/

d3.selectAll(".nv-line").on("click", function () {
    alert("clicked");
});

Если вам нравится смотреть исходный код nvd3:

Ответ 4

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

d3.selectAll(".nv-point").on("click", function (e) {    

alert(e[0].values[0]);
});