d3.js rende cliccabili gli assi cliccabili

Question

Mi stavo chiedendo se qualcuno conosce un modo per rendere selezionabili le etichette sull'asse. In questo momento i miei assi vengono generati come segue:

// Add an x-axis with label. 
    svg.append("g") 
     .attr("id", "xaxis") 
     .attr("class", "x axis") 
     .attr("transform", "translate(" + (margin.left + margin.left_padding) + "," + height + ")") 
     .attr("text_anchor", "top") 
     .call(d3.svg.axis().scale(x).orient("bottom")) 
     .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("font-size", "12") 
      .attr("dx", "-.8em") 
      .attr("dy", ".15em") 
      .attr("transform", function(d) { 
       return "rotate(-45)" 
      }) 


    // Add a y-axis with label. 
    svg.append("g") 
     .attr("id", "yaxis") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + (margin.left + margin.left_padding) + "," + 0 + ")") 
     .attr("text-anchor", "right") 
     .call(d3.svg.axis().scale(y).orient("left")) 
     .selectAll("text") 
      .attr("font-size", "12") 

    } 

Mi chiedo come rendere possibile per ogni numero/etichetta sull'asse avere un evento onclick.

Answer 1

È possibile selezionare con D3 e quindi associare una funzione a loro con .on('click', function)

Per il vostro codice, questo sarebbe simile a questa:

d3.select('#xaxis') 
    .selectAll('.tick.major') 
    .on('click',clickMe) 

function clickMe(){alert("I've been clicked!")} 

Si noti che questo selezionerà l'intero segno di spunta, non solo il testo, dal momento che .tick.major è la classe del gruppo che contiene sia l'etichetta tick (il testo) e il tick stesso (una linea SVG).

È inoltre possibile utilizzare d come argomento nella funzione che si sta chiamando sui tick. Se lo fai, d conterrà il valore del segno di spunta. Ad esempio, la seguente avrebbe inviato un avviso contenente ogni valore tick:

d3.select('#xaxis') 
    .selectAll('.tick.major') 
    .on('click',clickMe) 

function clickMe(d){alert(d)} 

Nota che probabilmente si può chiamare .major invece di .tick.major se nulla ma i principali zecche ha la classe major.