Я пытаюсь связать datapoints с событием onclick, чтобы я мог отображать оверлейный блок с некоторыми дополнительными деталями и ссылками. Я использую класс .nv-point для доступа к datapoints. Проблема в том, что я не могу зарегистрировать событие onclick для этих datapoints.
Вот код:
d3.selectAll(".nv-point").on("click",function(){
alert("clicked");
//do something more
});
Вот демо в jsFiddle
Вы можете легко привязать обработчик кликов к "кругу" или 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, чтобы вы могли точно видеть, какие данные доступны и как получить к нему доступ.
После долгих размышлений это, похоже, работает для меня:
d3.select("#mainGraph svg").selectAll(".nv-point").style("pointer-events", "all").on("click", function( e ) { console.log( JSON.stringify( e ) ); });
В принципе, разница между тем, что я сделал, и тем, что вы изначально пытались, это просто сбросить переопределение таблицы стилей, чтобы включить указатели-события, то есть стиль ( "указатель-события", "все" ). `
Строка линии выполняется с помощью строк svg, которые имеют класс nv-line. Вилка вашего оригинального jsFiddle находится здесь: http://jsfiddle.net/pnavarrc/qzwkn/1/
d3.selectAll(".nv-line").on("click", function () {
alert("clicked");
});
Если вам нравится смотреть исходный код nvd3:
Вы можете просто добавить аргумент, который свяжет его с точкой данных. В моем случае я пытался гиперссылку для каждой точки данных. Аргументы имеют значение, которое может быть использовано для обновления гиперссылки по требованию.
d3.selectAll(".nv-point").on("click", function (e) {
alert(e[0].values[0]);
});