d3.js使轴线点击可点击

Question

我想知道是否有人知道使轴线上的标签可点击的方法。现在我的轴产生如下：

// 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事件。

Answer 1

你可以用D3选择它们，那么功能结合到他们.on('click', function)

为您的代码，这将是这个样子：

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

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

注意，这将选择整个打勾，不仅仅是文本，因为.tick.major是包含滴答标签（文本）和滴答本身（SVG线）的组的类。

您还可以使用d作为您在滴答声上调用的函数的参数。如果您这样做，d将包含勾号的值。例如，下面会发送一个包含每个刻度值警告：

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

function clickMe(d){alert(d)} 

注意，您可以调用可能代替.major的.tick.major如果没有，但主要的蜱有major类。