Получение Tipsy для работы с D3 и ручными триггерами
В моем проекте я пытаюсь объединить "переключение" всплывающего окна Tipsy в расклад D3. По сути, я хочу иметь возможность нажимать на изображения, показывать там всплывающее окно и разрешать пользователю некоторое взаимодействие. Если пользователь закончил, он либо щелкает другое изображение, либо закрывает его, нажимая то же изображение.
Часть кода D3 выполняет некоторую визуализацию изображений в силовом макете. В основном код выглядит так:
var node = vis.selectAll("circle.node")
.data(data.nodes)
.enter().append("svg:image")
.attr("class", "node")
.attr("xlink:href", function (d) { return d.icon; })
.attr("x", function (d) { return d.x - 12; })
.attr("y", function (d) { return d.y - 12; })
.attr("width", '24px')
.attr("height", '24px')
.style("fill", function (d) { return fill(d.group); })
Ссылку для Tipsy можно найти здесь: http://onehackoranother.com/projects/jquery/tipsy/. Чтобы понять мои основы, я проверил это так:
$('.node').tipsy({
gravity: 'w',
opacity: 1,
html: true,
title: function () {
var d = this.__data__, icon = d.icon;
return '<img src="' + icon + '" style="width: 100px; height:100px;"/>;
}
});
Все идет нормально; используя этот код, если вы наведите курсор мыши, все будет работать.
Последняя корректировка, я добавил trigger: 'manual' к опциям Tipsy и добавил некоторый код в узел D3:
// this variable is declared on top somewhere:
var prev = null;
// and to the D3 code, this is added:
.on("click",
function () {
if (this == prev)
{
$(this).tipsy("hide");
prev = null;
}
else
{
// show
if (prev != null) {
$(prev).tipsy("hide");
}
$(this).tipsy("show");
prev = this;
}
});
Как вы можете видеть, код тесно отражает код на http://onehackoranother.com/projects/jquery/tipsy/ (раздел: ручное срабатывание всплывающей подсказки).
Теперь, если мы запустим этот код, он вдруг больше не будет работать. При ближайшем рассмотрении я заметил, что в коде Tipsy проблема заключается в следующем:
} else if (typeof options == 'string') {
console.debug(this); // added some debug info
var tipsy = this.data('tipsy');
if (tipsy) tipsy[options]();
return this;
}
Во время выполнения этого кода я вижу, что this.data('tipsy') всегда undefined, Однако элементы, которые выделены, кажутся правильными.
Я просмотрел другие SO сообщения, пока без удачи. Предложенный некоторыми, я экспериментировал с различными версиями jQuery, пытался связать onclick из jQuery вместо D3 и т. Д. До сих пор все с одинаковым поведением.
Может кто-нибудь сказать мне, что мне не хватает?
Минимальный контрольный пример
Простой минимальный тестовый пример Tipsy & D3, на котором основана эта работа, можно найти по этой ссылке: http://bl.ocks.org/ilyabo/1373263. HTML-код может быть заменен следующим:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.tipsy.js"></script>
<link href="tipsy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 800, h = 500;
var colors = d3.scale.category20();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
var data = d3.range(20).map(function(i) {
return { i:i, x:Math.random()*w, y:Math.random()*h, r:Math.random()*30 }
});
var prev = null;
vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("stroke", "black")
.attr("fill", function(d, i) { return colors(i); })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", function(d, i) { return d.r; })
.on("click",
function () {
if (this == prev)
{
$(this).tipsy("hide");
prev = null;
}
else
{
if (prev != null)
{
$(prev).tipsy("hide");
}
$(this).tipsy("show");
prev = this;
}
});
$('svg circle').tipsy({
trigger: 'manual',
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, c = colors(d.i);
return 'Hi there! My color is <span style="color:' + c + '">' + c + '</span>';
}
});
</script>
</body>
</html>
1 ответ
Проблема не с d3.
Проблема с навеселе.
Здесь я использую тот же типсы JS в Git
И это прекрасно работает.
Таким образом, проблема в том, что вы можете использовать какую-то старую версию с ошибками.
//setting the tipsy to all circles in svg
$('svg circle').tipsy({
trigger: 'manual',
gravity: 's',
html: true,
title: function() {
var d = d3.select(this).data(),
c = colors(d.i);
return 'Hi there! My color is <span style="color:' + c + '">' + c + '</span>';
}
});
SVG круг клик событие показать скрыть типсы вручную
.on("click",
function() {
if (this == prev) {
$(this).tipsy("hide");
prev = null;
} else {
if (prev != null) {
$(prev).tipsy("hide");
}
$(this).tipsy("show");
prev = this;
}
});
Код здесь
Надеюсь это поможет!