d3.js Eksen tıklamaları tıklanabilir hale getirin

Question

Herkesin, eksen üzerindeki etiketleri yapabilmenin bir yolu olduğunu bilerek merak ediyorum. şöyle Şu anda benim eksen oluşturulur: Ben ekseni üzerinde her numara/etiket için mümkün kılmak için nasıl merak ediyorum

// 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") 

    } 

onclick olayı var. Bu, bütün kene seçecek o

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

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

Not:

Answer 1

Sen d3 bunları seçebilir ve sonra kodu için .on('click', function)

onlara bir işlev bağlamak, bu böyle bir şey olmazdı Sadece metin değil, .tick.major, hem onay etiketini (metin) hem de işaretin kendisini (bir SVG çizgisi) içeren grubun sınıfıdır.

d işaretlerini çağıran işlevde argüman olarak da kullanabilirsiniz. Bunu yaparsanız, d işaretin değerini içerecektir. büyük keneler ama hiçbir şey major sınıf varsa muhtemelen .major yerine .tick.major çağırabilir

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

function clickMe(d){alert(d)} 

Not: Örneğin, aşağıdaki her kene değerini içeren bir uyarı gönderir.