6

ホストに要素を提供する JavaScript のコンポーネントがあり<svg>ます。d3.js を使用して SVG 要素を設定したいと考えています。

d3.js で SVG 要素を作成して に追加すると、<body>期待どおりに動作します。

var chart = d3.select('body').append('svg');

ただし、既に SVG 要素があります。私のコードをもっとよく似させたい：

var svg = document.createElement('svg'),
    chart = d3.select(svg);

この後者のアプローチでは、(Chrome の開発者ツールの要素パネルに表示されるように) SVG 要素が読み込まれますが、適切にレンダリングされません。

私はこれについて間違っていますか？

d3 が SVG 要素を作成しても、それが DOM にアタッチされておらず、アクセスできる限り、気にしません。

EDIT私は私の問題を再現するjsFiddleを作成しました。APPROACH変数を 1 と 2 の間で切り替えて、別のアプローチを確認できます。この問題は、Chrome と Firefox (Ubuntu 13.04 の最新バージョン) の両方で見られます。

EDIT 2動作中のバージョンと動作していないバージョンを並べて表示するスクリーンショットを作成しました。

要素ツリーはほとんど同じであることがわかります。ただし、動作しないバージョン (左) では、[スタイル] パネル (要素ツリーの右側) に一部のユーザー エージェント ルールがありません。なぜこれが違うのか分かりません。Chrome のバグだと思いますが、Firefox でも同じ動作が見られます。

4

1 に答える 1

4

問題は、間違って解釈される HTML 名前空間で SVG 要素を作成していることです。交換すれば

var svg = document.createElement('svg');

と

var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');

それは正常に動作します。D3 は名前空間を自動的に設定することで、これを処理します。

于 2013-07-06T18:32:43.797 に答える