0

エッジのパスとノードの円を含むsvgからインタラクティブなグラフを作成しようとしています。ノードの子を見つけるには、IDがすべて「node1_idnode2_id」の形式であるため、特定の正規表現を持つIDのエッジを検索できるようにします。ドルドル表記や正規表現をidで直接検索要素に配置するなど、さまざまな解決策を試しましたが、うまくいきませんでした。私はこれに答える他のものを見つけることができず、フロントエンドの取引にかなり慣れていないので、これがsvgに固有のものであるかどうかはわかりません。

$$('path[id^="\b10020 ([\d]+)"')
Error: SYNTAX_ERR: DOM Exception 12

document.getElementById("\b10020 ([\d]+)")
null

おそらく私が行った2つの最も賢明な試みです。この場合、node1_idが10020であるすべてのエッジ。

<path fill="none" stroke-width="1.0"
              d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
              id="10020 12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

一致を返すはずだったそのようなエッジの例であること。

4

2 に答える 2

1

私がそれをしていたら、マークアップを次のように変更します。

<path fill="none" stroke-width="1.0"
      d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
      data-node-1="10020" data-node-2="12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

次に、「単一ドル表記」（別名、jQuery）を使用します。

$('path[data-node-1="10020"]')
于 2012-08-30T17:43:39.130 に答える
0

次のレベル4バージョンでも、正規表現を受け入れるCSSセレクターはありません。「属性値が文字列で正確に始まる[foo^=bar]要素」を意味します。あなたはいくつかのことをすることができます：foobar

  • で始まるIDを持つノードだけが必要な場合は10020、を使用できます$$("path[id^='10020 ']")が、これは他の数字だけで継続しないIDを受け入れます。
  • 10020位置に関係なくIDに値を表示する場合は、セレクターを使用しpath[id~='10020']ます
  • 本当に正規表現を使用する必要がある場合は、自分でツリーをたどり、関心のある要素のみをフィルタリングする必要があります。上記のセレクターの1つに従って事前フィルター処理することでビットを最適化できるため、で始まる要素のみをチェックする必要があります。10020

ただし、ユースケースには大きな問題が1つあります。IDにスペースが含まれていない可能性があります。これは無効なSVGドキュメントです。本当に別の属性を使用する必要がありますid。おそらくclass自分に適しているか、それらの数値に意味的な意味がある場合は、独自の名前空間を定義し、その名前空間で新しい属性を使用してください。

を使用するclassと、セレクターも単純になる可能性があります。$$("path.10020")

于 2012-08-30T19:32:38.487 に答える