На самом деле у меня это работало несколько дней назад, но что-то должно быть изменилось, так как теперь оно не работает должным образом. Всплывающая подсказка отображается при наведении курсора на соответствующий элемент, но всегда в верхнем левом углу экрана. Когда я использую «проверить элемент» в окне браузера, я вижу, что стиль подсказки всегда установлен на top: 0px; left: 0px
, что говорит о том, что он не вычисляет новые значения для позиции.
Здесь показано создание элементов, к которым я пытаюсь прикрепить всплывающую подсказку (кружки разного размера на пузырьковой диаграмме), а также инициализацию подсыпки:
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
относится к идентификатору section
в моем html. Когда я запускаю это и наводю курсор на кружки данных на пузырьковой диаграмме, всплывающие подсказки появляются, но все они находятся в верхнем левом углу экрана. Может ли кто-нибудь заметить здесь что-нибудь не так, что могло бы вызвать эту ошибку?