d3.js使轴刻度可点击

时间:2013-06-24 18:49:18

标签: javascript d3.js

我想知道是否有人知道如何使轴上的标签可点击。现在我的轴生成如下:

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

1 个答案:

答案 0 :(得分:15)

您可以使用d3选择它们,然后使用.on('click', function)

将函数绑定到它们

对于您的代码,这看起来像这样:

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

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

请注意,这将选择整个刻度,而不仅仅是文本,因为.tick.major是包含刻度标签(文本)和刻度本身(SVG行)的组的类。 / p>

您还可以使用d作为您在刻度线上调用的函数中的参数。如果您这样做,d将包含tick的值。例如,以下内容将发送包含每个刻度值的警报:

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

function clickMe(d){alert(d)}

请注意,除非主要标记为.major类,否则您可以拨打.tick.major而不是major