且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

d3.js使轴刻度可点击

更新时间:2022-12-19 22:53:20

您可以用d3选择它们,然后绑定一个函数 .on('click',function)

You can select them with d3 and then bind a function to them with .on('click', function)

对于你的代码, p>

For your code, this would look something like this:

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

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

请注意,这将选择整个刻度,而不只是文本,因为 .tick.major 是组的类

Note that this will select the entire tick, not just the text, since .tick.major is the class of the group that contains both the tick label (the text) and the tick itself (an SVG line).

也可以使用 d 作为函数中的参数,你正在调用你的ticks。如果这样做, d 将包含tick的值。例如,以下将发送包含每个tick值的alert:

You can also use d as an argument in the function you are calling on your ticks. If you do so, d will contain the value of the tick. For example, the following would send an alert containing each tick value:

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

function clickMe(d){alert(d)}


$ b > .tick.major 如果只有主要的刻度有主要类。

Note that you can probably call .major instead of .tick.major if nothing but the major ticks has the major class.