0

我正在使用 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 以进行与图形相关的搜索、跟踪路径等。我将不胜感激任何帮助/代码片段/建议。

谢谢阿比吉特

4

1 回答 1

0

这种目的正是创建 jQuery SVG 插件的原因。据我所知，它适用于最新版本的 jQuery。

于 2014-01-28T17:56:44.953 回答