Расположение всплывающей подсказки на d3 в Firefox, IE

Question

Расположение всплывающей подсказки на d3 в Firefox, IE

Я рисую линейные графики d3 и подсказки, прикрепленные к кругу.

Всплывающие подсказки работают нормально в Chrome/Safari, но в Firefox и IE, когда вы наводите курсор мыши на точку, в то время как соответствующая подсказка появляется, она отображается за пределами элемента graph/SVG в верхнем левом углу экрана (элемент html) рядом с точкой.

Вот как я прикрепляю подсказку:

    jQuery('g circle').tipsy({
        gravity: 'w', 
        html: true,
        title: function() {
            return this.textContent;
        }
    })

Любой совет о том, что я делаю неправильно, будет высоко ценится.

6

svg d3.js tooltip tipsy

Источник

user1049733 04 сен '12 в 12:37

2 ответа

Другие вопросы по тегам svg d3.js tooltip tipsy

user114671 18 апр '13 в 17:55 2013-04-18 17:55 · Answer 1 · 2013-04-18 17:55

Этот патч добавляет правильную поддержку SVG в Tipsy.

4

Источник

user114671 18 апр '13 в 17:55

user1038015 04 сен '12 в 12:57 2012-09-04 12:57 · Answer 2 · 2012-09-04 12:57

tipsy использует offsetWidth и offsetHeight для элементов. Предполагается, что такие вещи работают с элементами SVG, к сожалению, это неверное предположение вне Chrome/Safari.

Спецификация CSSOM говорит, что offsetWidth/offsetHeight являются свойствами элемента html. Похоже, что Chrome / Safari поместили их в свои элементы SVG, но нет никакой спецификации, которая говорит, что это должно быть так.

Вам нужно будет либо исправить типсы, чтобы быть кросс-браузерным, либо попросить автора сделать это. Использование getTransformToElement и / или getBBox, вероятно, то, что нужно.