Databases
StackOverflow2013
Postsdbo
POd3, html in svg, animating opacity takes div out of position, why?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3, html in svg, animating opacity takes div out of position, why?
    text
    copied!<p><strong>Some context:</strong></p> <p>I've made a force layout, and I've attached divs to my svg g nodes, so that I can display nice paragraphs of text. I'm trying to create transitions that fade out the inserted divs.</p> <p><strong>The problem:</strong> </p> <p>Whenever I initiate a transition on the opacity style attribute of my div, it pops out of the positioning flow. I've isolated the issue in the linked <a href="http://jsfiddle.net/SZ29K/" rel="nofollow noreferrer">fiddle</a>. It's not related to the force layout, but I am using the foreign elements so that I can place html in a svg-based force layout.</p> <p>here's an example, and <a href="http://jsfiddle.net/SZ29K/" rel="nofollow noreferrer">the fiddle</a>:</p> <pre><code>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); </code></pre> <p>And a screenshot visual, from the fiddle (note how it seems to duplicate the div)</p> <p>state right before transition:</p> <p><img src="https://i.stack.imgur.com/Vgvvg.png" alt="enter image description here"></p> <p>state during transition:</p> <p><img src="https://i.stack.imgur.com/Artun.png" alt="enter image description here"></p> <p>I'm using Chrome 28 on OS X 10.6.8 to view it. It gets even funkier on Safari, with elements flashing in and out of visibility.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload