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)

Решение Вопроса

а затем привязать к ним функцию с помощью.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 учебный класс.

 Andrew24 июн. 2013 г., 23:50
Хорошо яЯ буду работать через это. Ваш пример работал отлично, поэтому определенно большое спасибо за ответ.
 Andrew24 июн. 2013 г., 23:04
У вас есть идея, почему событие click может быть зарегистрировано только один раз? Я нажимаю один из тиков, и он выполняет функцию clickme, но когда я нажимаю другие тики, ничего не происходит.
 Boyen20 дек. 2017 г., 14:45
Есть ли способ сделать кликабельную область больше, чем видимый тик? мои штрихи 2px, но этопочти невозможно нажать
 ckersch24 июн. 2013 г., 23:32
Трудно сказать, не видя ваш код. Я'Я рекомендую поместить на них самое основное событие клика, которое вы можете, и протестировать оттуда.
 Andrew24 июн. 2013 г., 22:21
Это выглядит великолепно! Я'дам вам знать, если у меня возникнут проблемы с реализацией. Спасибо за быстрый ответ.
 ckersch20 дек. 2017 г., 18:34
@Boyen Вы можете добавить прямоугольный элемент с непрозрачностью 0 к каждому тику и использовать его для своей цели клика.

Ваш ответ на вопрос