Javascript 醉醺醺的工具提示未粘贴到D3元素
事实上,我几天前就让它工作了,但现在它不能正常工作,所以一定有什么变化。将鼠标悬停在相关元素上时,工具提示确实会显示,但始终显示在屏幕的左上角。在浏览器窗口中使用“inspect element”时,我可以看到醉酒工具提示的样式始终设置为Javascript 醉醺醺的工具提示未粘贴到D3元素,javascript,d3.js,tooltip,circle-pack,tipsy,Javascript,D3.js,Tooltip,Circle Pack,Tipsy,事实上,我几天前就让它工作了,但现在它不能正常工作,所以一定有什么变化。将鼠标悬停在相关元素上时,工具提示确实会显示,但始终显示在屏幕的左上角。在浏览器窗口中使用“inspect element”时,我可以看到醉酒工具提示的样式始终设置为top:0px;左:0px,这表明它没有计算该位置的新值 这显示了我试图附加工具提示的元素(气泡图中大小不同的圆圈)的创建以及tipsy的初始化: function d3bubbles(dataset) { var diameter = 960;
top:0px;左:0px
,这表明它没有计算该位置的新值
这显示了我试图附加工具提示的元素(气泡图中大小不同的圆圈)的创建以及tipsy的初始化:
function d3bubbles(dataset) {
var diameter = 960;
// create new pack layout set to variable 'bubble'
var bubble = d3.layout.pack()
// no sorting, size allocated 960x960
.sort(null)
.size([diameter, diameter])
var canvas = d3.select("#mainBlock").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
d3.json("cleanJson.json", function (data) {
// run pack layout specified above returning array of nodes
// associated with 'data' from JSON file
// outputs array with computed position of all nodes as 'nodes'
// and populates some data for each node:
// depth, starting at 0 for root, x coordinate of node,
// y coordinate of node, radius r of node
var nodes = bubble.nodes(data);
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
// standard html element to display svg
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + ", " + d.y + ")";
});
node.append("circle")
// radius from data
.attr("r", function (d) {
return d.r;
})
// set stroke for circles but only on leaf nodes
.attr("stroke", function (d) {
return d.children ? "": "#f4efdd";
})
.attr("stroke-width", 10);
// tooltip
$('svg circle').tipsy( {
gravity: 'w',
fade: true,
html: true,
title: function() {
var d = this.__data__;
return d.children ? "" : d.value + " Manuscripts";
}
})
});
};
#mainBlock
指的是我的html中部分的id。当我运行此命令并将鼠标悬停在气泡图中的数据圆圈上时,工具提示确实会出现,但都在屏幕的左上角。有人能在这里发现任何可能导致此错误的错误吗?不幸的是,在SVG图形可用之前,tipsy已经创建了更多。如果必须使用tipsy,可能需要对jQuery进行如下调整:
jQuery('svg g.node').mousemove(function( event ) {
//
jQuery('.tipsy').css('left',(event.pageX+16)+'px');
jQuery('.tipsy').css('top',(event.pageY-16)+'px');
})
你的d3版本太新了,酒鬼无法支持。对于d3.js v6,请检查d3-v6-tip