13

foreignObjectSVG要素で実装されたHTMLノードラベルを使用して、d3強制指向レイアウトを使用しています。enter()これらの要素をさまざまな時点で選択して、それらの位置やその他のプロパティを更新したい (そして、 andで作成および破棄されるときにそれらを追跡したいexit()) が、他の SVG 要素のようにそれらを選択できないようです。

コンパクトな例を次に示します。

HTML:

<html>
    <head>
        <title>Cannot Select SVG Foreign Object</title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <script src = "fo_select.js"></script>
     </head>
     <body>
         <svg id="example_svg" width="600" height="600">
               <g>
                  <circle r="40" cx = "80" cy="80"></circle>
                  <foreignObject width = "100" height = "100" x = "200" y="200">
                         <body>Hello, world</body>
                  </foreignObject>
               </g>
         </svg>
         <script>run()</script>
     </body>
</html>

Javascript:

function run() {
    svg = d3.select("#example_svg");
    console.log(svg.selectAll("circle"));
    console.log(svg.selectAll("foreignObject"));
}

これはhttp://bl.ocks.org/3217448にもアップされています。コンソール出力は次のとおりです。

[Array[1]]
[Array[0]]

最初の配列にはcircle要素が含まれ、2 番目の配列は空です。circleオブジェクトは選択できるのに、選択できないのはなぜforeignObjectですか? の異常な性質に関係していると思いますforeignObject。コードでそれを操作するには、どのように選択すればよいですか? どうもありがとう。

4

2 に答える 2

19

厳密に言えば、SVGでは大文字と小文字が区別されるため、<foreignObject>の代わりにを使用する必要があり<foreignobject>ます。

ただし、もっと深刻なのは、WebKitに未解決のバグがあり、キャメルケース要素が選択されないことです。

考えられる回避策の1つは、次を使用することです。

.selectAll(function() { return this.getElementsByTagName("foreignObject"); })

（ただし、これは古いWebKitバージョンでは機能しない可能性があります。現在クローズされているWebKitバグ46800を参照してください。）

または、CSSクラスまたはIDを使用して、代わりにその方法で要素を選択することもできます。前述のさまざまなバグを考慮して、可能であれば現時点でこのアプローチをお勧めします。

于 2012-07-31T15:32:54.493 に答える
-1

d3.selectAll("foreignObject") または svg.selectAll("foreignObject") ができるはずです。それは、foreignObject 属性 (x と y の間) の余分なコンマかもしれません。私はD3を使用してforeignObject要素を挿入しただけなので、おそらくこのようにそれらを埋め込むことには何か違いがあります.

于 2012-07-31T15:27:19.003 に答える