Создание одной всплывающей подсказки для нескольких элементов

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

Может кто-нибудь сказать мне, как использовать delegate: '.x-form-field-wrap' для создания одной всплывающей подсказки.

Вот скрипта.


d3.js tooltip bubble-chart extjs
person salsa111    schedule 16.11.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Нет необходимости создавать несколько всплывающих подсказок. Создайте одну всплывающую подсказку и просто обновите ее положение при наведении и перемещении мыши.

var tip = Ext.create('Ext.tip.ToolTip',{
    title: 'test',
    width: 150,
    height: 40,
    radius:5,
    hidden: true,    
    anchor: 'left',
    autoHide: false,
    trackMouse: true,
    anchorToTarget: false
});

circle.on('mouseover',function(d,i){   
    tip.setTitle("radius: "+d.radius);    
    tip.showAt([d3.event.x,d3.event.y]);
}).on('mousemove',function(d,i){
   tip.setTitle("radius: "+d.radius);
    tip.showAt([d3.event.x,d3.event.y]);
});

Обновлена ​​скрипта.

person Gilsha    schedule 16.11.2015
comment
Спасибо. Но я не хочу использовать mouseOver и mouseMove для d3. Моя проблема была решена путем добавления showDelay:0 во всплывающую подсказку - person salsa111; 17.11.2015

arrow_upward
1
arrow_downward

Этот вопрос является классическим примером проблемы xy.

Вы можете решить свою проблему одной строкой, а именно установив showDelay:0 во всплывающих подсказках.

person Alexander    schedule 16.11.2015

arrow_upward
0
arrow_downward

Вам нужно рассчитать координаты X и Y и показать один div при наведении курсора мыши. вы можете сделать это, используя приведенный ниже код скрипки:

Я думаю, что это решение лучше, чем extjs.

var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", function (d) {
return d.radius;})
.style("fill", function (d, i) {
return "green";}).on("mouseover", function (d, i) { 
tDiv.html("Radius :" + d.radius + "</br>Name:" + data.children[i].name + "</br>Size:" + data.children[i].size);
tDiv.style("left", ((d3.event.pageX) - $(tDiv[0]).width() - 10) + "px").style("top", (d3.event.pageY - 0) + "px");   }).on("mouseleave", function (d, i) {
tDiv.style("display", "none");})
.call(drag);

Вы можете сослаться на этот код скрипта

person Nilesh Wagh    schedule 16.11.2015