events - Cómo agregar un evento de clic en el gráfico nvd3.js

Question

Estoy usando nvd3.js y tratando de agregar un evento de clic

d3.selectAll(".nv-bar").on(''click'', function () {console.log("test");});

JSFiddle

Cómo puedo hacer eso ?

Answer 1

Acabo de descubrir que esto también funciona (al menos para gráficos multibar):

chart.multibar.dispatch.on("elementClick", function(e) {
console.log(e);
});

Tuve que mirar la fuente en src / multibar.js para averiguarlo; ya que está ahí, supongo que esta es la forma en que estaba destinado a hacerse. Sin embargo, secundé lo que Alex dijo en su respuesta: la falta de documentación para NVD3 es una gran desventaja. Lo cual es triste porque la idea general del proyecto es genial: darnos el poder de D3 sin entrar en todos los detalles ...

Answer 2

Esto funcionó para mí. https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

Simplemente use console.log (e) en lugar de console.log (e.data) para evitar un error indefinido.

Answer 3

Esto me funcionó: (e.target. Data genera los atributos de datos adjuntos a ese elemento, como x, y)

$(document).on("click", "#chart svg", function(e) {
console.log (e);
console.log (e.target.__data__);
});

Answer 4

Hay tres puntos clave aquí.

1) Sin documentación significa que debe pasar por el código fuente.

2) Todos los gráficos tienen información sobre herramientas, lo que significa que los eventos ya se están activando en el código fuente.

3) Utilice el objeto de configuración (en la Documentación) como un mapa de ruta del código fuente.

es decir.

var config = {chart: {type: ''multiChart'',xAxis:{},yAxis{}}

Abra el archivo nvd3 / nv.d3.js

CTRL + F + el tipo de gráfico. En este caso es ''multiChart''.

Verá nv.models.multiChart.

Desplácese hacia abajo para encontrar los eventos de información sobre herramientas y encontrará la documentación necesaria.

lines1.dispatch.on(''elementMouseout.tooltip'', function(evt) {tooltip.hidden(true) });
stack1.dispatch.on(''elementMouseout.tooltip'', function(evt) {tooltip.hidden(true) });
bars1.dispatch.on(''elementMouseout.tooltip'', function(evt) {tooltip.hidden(true) });

Por lo tanto, para escribir tu propio evento ...

var config = {chart: {type: ''multiChart'',
bars1: {
dispatch:{
elementClick:function(e){//do Stuff}
},
xAxis:{},yAxis{}
}

Answer 5

Me encontré con el mismo problema y estaba a punto de volcar NVD3 por la falta de documentación ... Lo que debe hacer es agregar una función de devolución de llamada a addGraph (). También tenga en cuenta el d3.selectAll () en lugar de d3.select ().

Buena suerte.

nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 5, right: 5, bottom: 5, left: 5})
.showValues(false)
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(''d''));
d3.select(''#social-graph svg'')
.datum([data])
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
},function(){
d3.selectAll(".nv-bar").on(''click'',
function(){
console.log("test");
});
});

Answer 6

Para el gráfico de área apilada, debe deshabilitar la línea interactiveGuideline elementClick.area y usar elementClick.area :

chart.useInteractiveGuideline(false);
chart.stacked.scatter.dispatch.on("elementClick.area", function(e) {
console.log(e);
});

Answer 7

Si usa AngularJS, use este código en su app.js

$scope.$on(''elementClick.directive'', function(angularEvent, event){
console.log(event);
});

Answer 8

jQuery hace esto fácil:

$( ".nv-bar" ).click(function() {
console.log("test");
});

Fiddle @ http://jsfiddle.net/eTT5y/1/

Answer 9

Este blog de coderwall nos encamina en la dirección correcta.

chr.scatter.dispatch.on(''elementClick'', function(event) { console.log(event); });

Answer 10

$(''.nv-pie .nv-pie .nv-slice'').click(function(){
temp = $(this).text();
alert(temp);
})

Esto funcionaría bien para el gráfico circular, de manera similar, puede seguir adelante con otros gráficos también ...