d3.js làm cho các dấu trục có thể nhấp được

Question

Tôi đã tự hỏi liệu có ai biết cách làm cho các nhãn trên trục có thể nhấp được không. Ngay bây giờ trục của tôi được tạo như sau:

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

    } 

Tôi tự hỏi làm thế nào để có thể cho mỗi số/nhãn trên trục có sự kiện onclick.

Answer 1

Bạn có thể chọn chúng với d3 và sau đó gắn một chức năng để họ có .on('click', function)

Đối với mã của bạn, điều này sẽ giống như thế này:

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

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

Lưu ý rằng điều này sẽ chọn toàn bộ đánh dấu, không chỉ là văn bản, vì .tick.major là lớp của nhóm chứa cả nhãn đánh dấu (văn bản) và dấu chọn (dòng SVG).

Bạn cũng có thể sử dụng d làm đối số trong hàm bạn đang gọi trên bọ ve. Nếu bạn làm như vậy, d sẽ chứa giá trị của dấu tích. Ví dụ, sau đây sẽ gửi một cảnh báo chứa mỗi giá trị đánh dấu:

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

function clickMe(d){alert(d)} 

Lưu ý rằng bạn có thể có thể gọi .major thay vì .tick.major nếu không có gì nhưng ve lớn có lớp major.