使用jQuery实现与Alchemy.js SVG的交互
使用jQuery实现与Alchemy.js SVG的交互
提问于 2017-07-18 04:32:19
如何使用jQuery与Alchemy.js生成的SVG进行交互？
我正在尝试使用jQuery与Alchemy.js构建的SVG元素进行交互。
下面的代码没有像预期的那样工作(允许我单击一个链接并看到一个带有元素值的警告)，但是当我进入Firefox控制台并手动输入$("g").on(" click "，displayNode)时，交互就会按预期工作。
这似乎是与脚本执行期间SVG元素的就绪状态(?)相关的问题。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" />
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<link rel="stylesheet" type="text/css" href="svg/jquery.svg.css">
<script type="text/javascript" src="svg/jquery.svg.js"></script>
<script type="text/javascript">
function displayNode ()
{
var label = $(this).find("text").text();
alert("Clicked on [" + label + "]");
}
var config =
{
dataSource: "philosopher.json",
cluster: true,
clusterColours: ["#DD79FF", "#00FF30", "#5168FF", "#f83f00", "#ff8d8f"],
forceLocked: false,
nodeCaption: "title",
edgeCaption: "relatedness",
nodeCaptionsOnByDefault: true,
nodeTypes: {"type":["philosopher"]},
directedEdges:true,
nodeStyle:
{
"philosopher":
{
"radius": 18
}
},
initialScale: 0.7,
initialTranslate: [250,150]
};
$(function () {
alchemy = new Alchemy(config);
$("g.active").on("click",displayNode);
});
</script>
</head>
<body>
<div class="alchemy" id="alchemy"></div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2017-07-18 04:49:07
试试这个：$('#alchemy').on('click', 'g.active', displayNode);
在不太了解alchemy.js的情况下，我假设它在页面加载时动态地将jQuery不知道的DOM元素添加到页面中。我怀疑jQuery不能找到'g.active‘，也不能给它附加一个点击监听器。
然后，您必须使用父节点来定位或注册on-click。您也可以选择使用$('body').find(....) -我建议您在JavaScript控制台(在大多数浏览器中都可以通过点击F12找到)中试用，并尝试测试如何与Alchemy.js交互
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45153190
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号