在我的项目中，我尝试在D3强制布局中组合“切换” Tipsy弹出窗口。基本上，我希望能够单击图像，在那里显示弹出窗口，并允许用户进行一些交互。如果用户完成操作，则他要么单击另一图像，要么通过单击同一图像将其关闭。
代码的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;"/>;
}
});
到目前为止，一切都很好;使用此代码，如果您将鼠标悬停，它将可以正常工作。
最后一次调整，我在Tipsy的选项中添加了
trigger: 'manual'，并在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，试图绑定jQuery而不是D3的onclick等。到目前为止，所有行为都相同。
有人可以告诉我我想念什么吗？
最小的测试用例
可在以下链接上找到此工作基于的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>
最佳答案
问题不在于d3。
问题出在棘手。
在这里，我在git中使用了相同的js技巧
而且效果很好。
因此，问题在于您可能正在使用Tipsy的一些旧的越野车版本。
//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;
}
});
工作代码here
希望这可以帮助！