D3.js: Мышь между линиями сетки

Question

Я создаю линейную диаграмму с линиями сетки. Вот аналогичный пример: http://bl.ocks.org/hunzy/11110940 Мне нужно изменить фон вертикального пространства между X (2) на X (4), X (8) на X (10) и X (12) на X (14) при наведении мыши. Но я не могу понять, как использовать D3 для ссылки на эти пробелы между линиями сетки.

Answer 1

Нет ничего, что можно было бы щелкнуть по/наведите курсор мыши. Нормальная ось/сетка создает линии, а не прямоугольники. Вам нужно будет изменить поведение по умолчанию объектов оси, чтобы создать «невидимые, но доступные для клика» прямоугольники, чтобы иметь возможность присоединить событие мыши к этим пространствам.

Я не знаю, является ли это рекомендуемым подходом, но похоже, что он может работать. После того, как ось была создано:

something 
    .attr('class','xaxis') 
    .call(xAxis) 

Вы можете выбрать тики с чем-то вроде этого:

d3.select(svg).select('.xaxis g.tick').each(function(){ 
    // this.transform will be "translate(X,Y)" 
}) 

В функции вы можете запросить существующие свойства g элементов и извлечь атрибут transform который будет содержать смещение X и Y для «галочки». Это можно использовать для определения одного измерения ваших объектов прямоугольника. Другое измерение определяется размером другой оси или чем-то подобным.