Question

我使用d3js创建了一个气泡图，并添加了Extjs工具提示。在这样做时，我为气泡图中的每个圆创建了单独的工具提示。当我将鼠标指针从1个圆圈移动到另一个圆圈时，工具提示的显示有明显的延迟。所以我想为所有圈子提供一个工具提示。

有人可以告诉我如何使用delegate: '.x-form-field-wrap'创建单个工具提示。

这是fiddle。

Answer 1

这个问题是xy problem的典型例子。

您可以在一行中解决问题，即在工具提示上设置showDelay:0。

Answer 2

无需创建多个工具提示。创建一个工具提示，只需更新它在鼠标悬停和鼠标移动时的位置。

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]);
});

更新了fiddle

Answer 3

您需要计算X和Y坐标并在mouseover事件上显示一个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);

您可以参考this fiddle code

为多个元素创建单个工具提示

3 个答案: