events - gtag event tracking

¿Cómo agregar y usar correctamente los eventos D3?

Question

Tengo problemas para entender el uso de eventos D3 y funciones de envío. Tengo un ejemplo de gráfico en el que he estado trabajando llamado: " Tablas de barras verticales con leyendas ".

Dibujar los cuadros y las leyendas fue bastante fácil, pero me gustaría agregar la capacidad de resaltar cada barra a medida que paso el ratón sobre su leyenda de texto correlativo, que se encuentra a la derecha del gráfico.

He leído toda la documentación del evento e incluso he analizado varios ejemplos, la mayoría de los cuales son bastante complicados, pero parece que me falta algo. ¿Alguien sabría cómo realizar mejor la función de mouseover de leyenda de texto que distribuye eventos para cambiar automáticamente los colores de las barras verticales correspondientes?

Answer 1

Esta pregunta es similar a la que publicó en el Grupo de Google d3-js. Sin duplicar lo que escribí allí, reiteraría que probablemente no desee d3.dispatch; que está destinado a abstracciones de eventos personalizados (como pinceladas y comportamientos). Será más simple usar eventos nativos.

Si desea que su leyenda cambie el color de la barra correspondiente al pasar el mouse, desglose el problema en pasos:

1. Detecta mouseover en la leyenda.
2. Seleccione la barra correspondiente.
3. Cambia el color de relleno de la barra.

Primero, use selection.on para escuchar los eventos "mouseover" en los elementos de la leyenda. Se llamará a su función de oyente cuando el mouse vaya sobre un elemento de leyenda, y se le llamará con dos argumentos: los datos ( d ) y el índice ( i ). Puede usar esta información para seleccionar la barra correspondiente mediante d3.select . Por último, use selection.style para cambiar el estilo de "relleno" con el nuevo color.

Si no está seguro de cómo seleccionar la barra correspondiente en la leyenda mouseover, por lo general hay varias opciones. El más sencillo es seleccionar por índice, suponiendo que el número de elementos de leyenda y el número de elementos rect son los mismos, y están en el mismo orden. En ese caso, si un rect variable local contiene los elementos rect, podría decir:

function mouseover(d, i) {
  d3.select(rect[0][i]).style("fill", "red");
}

Si no desea confiar en el índice, otra opción es buscar la barra correspondiente a partir de datos idénticos. Esto usa selection.filter :

function mouseover(d, i) {
  rect.filter(function(p) { return d === p; }).style("fill", "red");
}

Otra opción más es proporcionarle a cada rect un ID único, y luego seleccionar por id. Por ejemplo, en la inicialización, podría decir:

rect.attr("id", function(d, i) { return "rect-" + i; });

Luego, puede seleccionar el rect por id al pasar el mouse sobre él:

function mouseover(d, i) {
  d3.select("#rect-" + i).style("fill", "red");
}

El ejemplo anterior está ideado ya que utilicé el índice para generar el atributo id (en cuyo caso, es más simple y más rápido usar la primera técnica de selección por índice). Un ejemplo más realista sería si sus datos tienen una propiedad de nombre; luego puede usar d.name para generar el atributo id, y también seleccionar por id. También puede seleccionar por otros atributos o clases, si no desea generar una identificación única.

Answer 2

La respuesta de Mike es genial.

Lo usé para crear esto para seleccionar una celda en una grilla que estaba dibujando:

.on(''click'', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y) #displays the cell x y location
      d3.select(this).style("fill", "red");

Entonces, cuando estoy ingresando los datos, agregué el detector de eventos y usé d3.select (this).

Vea el código en contexto a continuación:

 vis.selectAll("rect")
    .data(singleArray)
    .enter().append("svg:rect")
    .attr("stroke", "none")
    .attr("fill", (d) -> 
      if d.lifeForm
        return "green" 
      else
        return "white")
    .attr("x", (d) -> xs(d.x))
    .attr("y", (d) -> ys(d.y))
    .attr("width", cellWidth)
    .attr("height", cellHeight)
    .on(''click'', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y)
      d3.select(this).style("fill", "red");
      return
    )