5

いくつかのコンテキスト:

強制レイアウトを作成し、svg g ノードに div を追加して、テキストの適切な段落を表示できるようにしました。挿入された div をフェードアウトするトランジションを作成しようとしています。

問題：

div の opacity スタイル属性でトランジションを開始するたびに、ポジショニング フローから飛び出します。リンクされたfiddleで問題を特定しました。強制レイアウトとは関係ありませんが、html を svg ベースの強制レイアウトに配置できるように、外部要素を使用しています。

ここに例とフィドルがあります：

var foreign = d3.select("body")
    .append("svg")
    .attr("height", 200)
    .attr("width", 300)
    .append("svg:g")
    .attr("transform", 
          "translate(40, 20)")
    .append("svg:foreignObject")
    .attr("width", "100px")
    .attr("height", "50px");

var outer = foreign.append("xhtml:div")
    .attr("class", "outer");

var inner = outer.append("xhtml:div")
    .attr("class", "inner")
    .text("inner div");

outer.transition()
    .duration(3000)
    .style("opacity", 0.0);

そして、フィドルからのスクリーンショットのビジュアル（divを複製しているように見えることに注意してください）

遷移直前の状態:

ここに画像の説明を入力

遷移中の状態:

ここに画像の説明を入力

OS X 10.6.8 で Chrome 28 を使用して表示しています。要素が表示されたり消えたりして、Safari ではさらにファンキーになります。

4

2 に答える 2

0

不透明度の遷移によって div の位置がずれてしまう理由が理解できなかったようです。Lars が Chromium で問題を確認していないため、おそらくそれは解決されたバグです。

ただし、svg 内で div をアニメーション化する問題の解決策を見つけました。foreignObject を独自の svg:g 要素でラップし、foreignObject 内の div ではなく、g 要素をアニメーション化します。

これは、OS X 10.6.8の Chrome 28 と Safari 5.1.9 の両方で機能する編集済みのフィドルです。

そしてコードの違い：

var gWrapOnForeign = d3.select("body")
    .append("svg")
    .attr("height", 200)
    .attr("width", 300)
    .append("svg:g")
    .attr("transform", 
          "translate(40, 20)")
    .append("svg:g");

var foreign = gWrapOnForeign.append("svg:foreignObject")
    .attr("width", "100px")
    .attr("height", "50px");

var outer = foreign.append("xhtml:div")
    .attr("class", "outer")
    .style("opacity", 1.0);

var inner = outer.append("xhtml:div")
    .attr("class", "inner")
    .text("inner div");

gWrapOnForeign.transition()
    .duration(3000)
    .style("opacity", 0.0);
于 2013-08-18T15:57:27.180 に答える