我正在使用Pydot创建一个svg文档。以下是该文档的示例:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.30.1 (20130221.2233)
-->
<!-- Title: Lineage Pages: 1 -->
<svg width="152pt" height="152pt"
viewBox="0.00 0.00 152.00 152.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 148)">
<title>Lineage</title>
<polygon fill="#b0e2ff" stroke="#b0e2ff" points="-4,5 -4,-148 149,-148 149,5 -4,5"/>
<!-- 1 -->
<g id="node1" class="node"><title>1</title>
<ellipse fill="lightblue" stroke="black" cx="72" cy="-72" rx="72" ry="72"/>
<text text-anchor="middle" x="72" y="-66.4" font-family="Times,serif" font-size="14.00">Test</text>
</g>
</g>
</svg>
我想在使用JQuery的javascript页面中加载此文档。我的目的是添加事件处理程序(例如鼠标点击圆圈以打开JQuery UI模式对话框或Accordian)。为了完成它,我需要访问SVG DOM。它似乎不像我正在做的那样工作。我的Javascript代码如下。单击圆圈中的文本时,警报框不会显示。有人能告诉我一个有效的例子吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="page_div"></div>
<!-- <object data="exec_chain.svg" id="svgembed" type="image/svg+xml" width="100%" height="100%"></object> -->
<!-- <input type="button" id="driver" class="btn" value="Load Data"/> -->
<!-- <input type="button" id="next" class="btn" value="Check Data"/> -->
<script type="text/javascript">
$(document).ready(function() {
$.get("test.svg", null, function(data) {
var svgNode = $("svg", data);
var docNode = document.adoptNode(svgNode[0]);
var pageNode = $("#page_div");
pageNode.html(docNode);
}, 'xml');
$("text").on("click", function() {
alert('I am here') ;
}) ;
}) ;
</script>
</body>
</html>
另外,我读到Jquery SVG插件需要用于访问DOM,因为HTML DOM与SVG DOM不同。那是对的吗? JQuery SVG插件是否与最新版本的JQuery冲突 - 欢迎提出任何见解。
我的最终SVG文档将由Pydot / GraphViz生成的中等大小的有向图组成。一旦图形被渲染,用户就会与之交互。我需要将所选路径或节点在前/后方向上突出显示一个/两个级别,对话框根据某些用户操作显示节点/边缘属性。什么是javascript组件可以帮助我快速完成它?
我选择JQuery UI的原因主要是获取UI组件。我是否需要查看jsNetworkX以获取与图形相关的搜索,跟踪路径等。我将非常感谢任何帮助/代码段/建议。
由于 作者Abhijit
答案 0 :(得分:0)
这种目的正是创建jQuery SVG插件的原因。据我所知,它适用于最新版本的jQuery。