0
jQueryを使用してAlchemy.jsで生成されたSVGと対話するにはどうすればよいですか？jQueryを使用してAlchemy.jsと対話するSVG
私は、Alchemy.jsによって構築されたSVG要素と対話するためにjQueryを使用しようとしています。
次のコードは期待通りに動作しません（リンクをクリックして要素の値でアラートを表示することができます）。しかし、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>
ありがとうございました。さらに、開発ツールコンソールから入力すると、提案されたコードは機能しません（開発ツールコンソールから入力した場合は元の "$（ 'g'）on（ 'click'、displayNode）は機能します）。 – atrobinson
：/ごめんなさい。私はおそらく、働く答えに貢献するためにalchemy.jsについて十分に知りません。 – Porschiey