使用jQuery与Alchemy.js进行交互SVG

如何使用jQuery与Alchemy.js生成的SVG进行交互？使用jQuery与Alchemy.js进行交互SVG

我正在尝试使用jQuery与Alchemy.js构建的SVG元素进行交互。

以下代码无法按预期工作（允许我单击链接并查看具有元素值的警报），但是当我进入Firefox控制台并手动键入$（“g”）时。 on（“click”，displayNode）交互按预期工作。

这似乎是与脚本执行过程中准备好的SVG元素相关的问题（？）。

<!doctype html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" /> 
 
\t <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="svg/jquery.svg.css"> 
 
\t <script type="text/javascript" src="svg/jquery.svg.js"></script> 
 
\t <script type="text/javascript"> 
 
\t function displayNode() 
 
\t { 
 
\t \t var label = $(this).find("text").text(); 
 

 
\t \t alert("Clicked on [" + label + "]"); 
 
\t } 
 

 
\t var config = 
 
\t { 
 
\t \t dataSource: "philosopher.json", 
 
\t \t cluster: true, 
 
\t \t clusterColours: ["#DD79FF", "#00FF30", "#5168FF", "#f83f00", "#ff8d8f"], 
 
\t \t forceLocked: false, 
 
\t \t nodeCaption: "title", 
 
\t \t edgeCaption: "relatedness", 
 
\t \t nodeCaptionsOnByDefault: true, 
 
\t \t nodeTypes: {"type":["philosopher"]}, 
 
\t \t directedEdges:true, 
 
\t \t nodeStyle: 
 
\t \t { 
 
\t \t \t "philosopher": 
 
\t \t \t { 
 
\t \t \t \t "radius": 18 
 
\t \t \t } 
 
\t \t }, 
 
\t \t initialScale: 0.7, 
 
\t \t initialTranslate: [250,150] 
 
\t }; 
 
\t 
 
\t $(function() { 
 
\t \t alchemy = new Alchemy(config); 
 

 
\t \t $("g.active").on("click",displayNode); 
 
\t }); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <div class="alchemy" id="alchemy"></div> 
 
</body> 
 
</html>

来源

2017-07-17 atrobinson

试试这个： $('#alchemy').on('click', 'g.active', displayNode);

不知道很多关于alchemy.js中，我推测，它动态地添加DOM元素的页jQuery不会知道在页面加载。我怀疑jQuery因此找不到'g.active'，并且不能将click监听器添加到它。

然后，您必须使用父节点来查找或注册您的点击。你可以选择使用$('body').find(....) - 我建议玩弄在JavaScript控制台（通过点击F12在大多数浏览器中），并试图测试你如何与Alchemy.js接口

来源

2017-07-17 20:49:06 Porschiey

谢谢你的建议，但它是不成功的。另外，从开发工具控制台输入时，建议的代码不起作用（而原始的“$（'g'）。on（'click'，displayNode）”从开发工具控制台输入时可以工作）。 – atrobinson

：/遗憾听到。我可能对alchemy.js不太了解，以提供一个有效的答案。 – Porschiey

使用jQuery与Alchemy.js进行交互SVG

回答

相关问题