Как правильно добавлять и использовать события D3?

У меня возникли проблемы с пониманием использования событий D3 и функций отправки. У меня есть пример диаграммы, над которым я работал над вызовом: " Вертикальные диаграммы с легендами.

Рисование диаграмм и легенд было достаточно простым, но я хотел бы добавить возможность выделить каждую панель, когда я навешиваю на нее корреляционную текстовую легенду, расположенную справа от диаграммы.

Я прочитал всю документацию по событиям и даже посмотрел на ряд примеров, большинство из которых довольно сложны, но я, кажется, что-то пропускаю. Кто-нибудь знает, как наилучшим образом выполнить функциональность текстовой легенды, которая отправляет события для автоматического изменения цветов соответствующих вертикальных баров?

Ответ 1

Этот вопрос похож на тот, который вы опубликовали в группе Google d3-js. Не повторяя то, что я там написал, я бы повторил, что вы, вероятно, не хотите d3.dispatch; который предназначен для пользовательских абстракций событий (таких как кисти и поведения). Будет проще использовать собственные события.

Если вы хотите, чтобы ваша легенда изменила цвет соответствующей строки при наведении курсора мыши, выполните разбивку на этапы:

Обнаружение мыши над легендой.
Выберите соответствующий бар.
Измените цвет заливки.

Сначала используйте selection.on для прослушивания событий "mouseover" на элементах легенды. Функция вашего слушателя вызывается, когда мышь переходит через элемент легенды и вызывается с двумя аргументами: данными (d) и индексом (i). Вы можете использовать эту информацию, чтобы выбрать соответствующий бар через d3.select. Наконец, используйте selection.style, чтобы изменить стиль заливки на новый цвет.

Если вы не знаете, как выбрать соответствующий бар в легендарной мыши, обычно существует несколько вариантов. Наиболее простым является выбор по индексу, предполагая, что количество элементов легенды и количество прямых элементов одинаковы, и они находятся в одном порядке. В этом случае, если локальная переменная rect содержит прямые элементы, вы можете сказать:

function mouseover(d, i) {
  d3.select(rect[0][i]).style("fill", "red");
}

Если вы не хотите полагаться на индекс, другой вариант - проверять соответствие бара на основе идентичных данных. Это использует selection.filter:

function mouseover(d, i) {
  rect.filter(function(p) { return d === p; }).style("fill", "red");
}

Еще один вариант - дать каждому прямоугольнику уникальный идентификатор, а затем выбрать по id. Например, при инициализации вы можете сказать:

rect.attr("id", function(d, i) { return "rect-" + i; });

Затем вы можете выбрать rect по id при наведении курсора мыши:

function mouseover(d, i) {
  d3.select("#rect-" + i).style("fill", "red");
}

Вышеприведенный пример изобретателен, так как я использовал индекс для генерации атрибута id (в этом случае проще и быстрее использовать первый метод выбора по индексу). Более реалистичным примером может быть, если ваши данные имеют свойство name; вы можете использовать d.name для генерации атрибута id, а также выбрать по id. Вы также можете выбрать другие атрибуты или класс, если вы не хотите генерировать уникальный идентификатор.

Ответ 2

Ответ Майка велик.

Я использовал его, чтобы выбрать ячейку в сетке, которую я рисовал:

.on('click', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y) #displays the cell x y location
      d3.select(this).style("fill", "red");

Поэтому, когда я вводил данные, я добавил слушателя событий и использовал d3.select(this).

Смотрите код в контексте ниже:

 vis.selectAll("rect")
    .data(singleArray)
    .enter().append("svg:rect")
    .attr("stroke", "none")
    .attr("fill", (d) -> 
      if d.lifeForm
        return "green" 
      else
        return "white")
    .attr("x", (d) -> xs(d.x))
    .attr("y", (d) -> ys(d.y))
    .attr("width", cellWidth)
    .attr("height", cellHeight)
    .on('click', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y)
      d3.select(this).style("fill", "red");
      return
    )