Подсказка не отображается d3.js

У меня есть простой вопрос подсказки, но я не смог найти решение. Коды ниже рисуют диаграмму пончика. Когда пользователь навешивает сегмент пирога, всплывающая подсказка должна появляться посредине пончика. Но я не знаю, почему это не работает. Может кто-нибудь помочь указать на проблему? Вот JSbins Подсказка не отображается d3.js

Если я изменяю линию 36 на d3.select(#pieChart), всплывающая подсказка работает. Однако по некоторым причинам я хочу, чтобы всплывающая подсказка добавлялась на svg.

Большое спасибо!

источник

2016-03-22 merylz

Возможный дубликат [можно добавить элемент div внутри элемента svg] (http://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-svg-element) – Paul

Как @Paul сказал, вы не можете использовать элемент 'div' внутри' svg'. Вы хотите использовать элемент 'g' (group), а затем добавить к нему элементы' text', установив '.attr (" y ", )' для их смещения по вертикали. Тогда все, что вам нужно изменить, это '.html (...)' to '.text (...)' при обновлении всплывающей подсказки. – JSBob

Не используется JSBin много, поэтому я использовал JSFiddle: https://jsfiddle.net/thatoneguy/0qgzLk2L/

Вы не можете присоединять к DIV SVG, так что вы должны создать контейнер, как так:

var svgContainer = d3.select('#pieChart');

И затем добавить SVG к этому:

var svg = svgContainer.append('svg')

И теперь использовать контейнер для всплывающих подсказок:

var tooltip = svgContainer 
     .append('div')

источник

2016-03-22 15:40:28 thatOneGuy

Подсказка не отображается d3.js

ответ

Смежные вопросы