rendering order - how to make something appear on top layer?

[frank]

Hi group,

Is there a function to make a object render on top of other things?
For example, if I have labled force directed graph (e.g.,
http://bl.ocks.org/950642), how do I make sure that all the text
labels render on top of the node circles/images?

I tried to set the "render-order" attributes in both the text and the
g element, but they don't seem to work...

[Mike Bostock]

Render order is determined by the order in which you append elements
to the document; elements are drawn in document traversal order.

The structure of the linked example is like this:

<svg:g class="node">
<svg:image class="circle"/>
<svg:text class="nodetext"/>
</svg:g>
<svg:g class="node">
<svg:image class="circle"/>
<svg:text class="nodetext"/>
</svg:g>
…

This, while each text element is drawn on top of its corresponding
circle, it's possible that the circle for a later node could be drawn
on top of the label for an earlier node. You could change the
structure to be like this:

<svg:g class="circle">
<svg:image/>
<svg:image/>
…
</svg:g>
<svg:g class="nodetext">
<svg:text/>
<svg:text/>
…
</svg:g>

This will require changing how you create the nodes (using selectAll
twice), and how you update the nodes. Though, you can merge the two
selections together for update:

node = vis.selectAll("g.circle image, g.nodetext text");

You'd also need to change the CSS a bit.

Mike

[frank]

I see; but can't I just specify a "render-order" attribute as shown
here:

http://dev.w3.org/SVG/modules/renderorder/SVGRenderOrder.html

This way I can change which element to render on top dynamically
instead of reordering the document...

[Mike Bostock]

> http://dev.w3.org/SVG/modules/renderorder/SVGRenderOrder.html

That'd be great, but as far as I know it's not supported by any browser vendors.

Mike

[Jon Frost]

Right - the 'render-order' attribute is not supported by any browser/viewer that I am aware of.  Ordering of graphical content in SVG is managed by the order in the SVG DOM.  For those w/ HTML experience it seems logical that z-index could apply to SVG as well, but I recall that there was some solid reasoning for why this change to the rendering model might not work well.

This has come up before on other lists - it is  little confusing for the W3C to keep the "Working Draft" proposals on their website without more clearly indicating that the Modules and other working drafts are not actually an official part of the SVG spec.

After the SVG DOM has been created it can be manipulated via script as in this demo:
http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/reorder_elements.svg
http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/

   best,

     Jon

[frank]

I see. Thanks Jon for the examples! I have a newbie question: in the
examples, a child element is appended to the parent, but I don't see a
remove operation - does it always keep the original element, but just
keep on adding copies to the top?

On Jul 12, 1:02 pm, Jon Frost <jonfrost2...@gmail.com> wrote:
> Right - the 'render-order' attribute is not supported by any browser/viewer
> that I am aware of.  Ordering of graphical content in SVG is managed by the
> order in the SVG DOM.  For those w/ HTML experience it seems logical that
> z-index could apply to SVG as well, but I recall that there was some solid
> reasoning for why this change to the rendering model might not work well.
>
> This has come up before on other lists - it is  little confusing for the W3C
> to keep the "Working Draft" proposals on their website without more clearly
> indicating that the Modules and other working drafts are not actually an
> official part of the SVG spec.
>
> After the SVG DOM has been created it can be manipulated via script as in

> this demo:http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/...http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/
>
>    best,
>      Jon

[Jon Frost]

No, the element is first removed from where it was before it is moved into its new position in the DOM.  Here we go, directly from the DOM 2 spec:

appendChild

Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.

insertBefore

Inserts the node newChild before the existing child node refChild. If refChild is null, insert newChild at the end of the list of children.
If newChild is a DocumentFragment object, all of its children are inserted, in the same order, before refChild. If the newChild is already in the tree, it is first removed.

More info can be found here - http://www.w3.org/TR/DOM-Level-2-Core/core.html

   best,

     Jon

[Mike Bostock]

You may also be interested in D3's selection.sort operator:

https://github.com/mbostock/d3/wiki/Selections#sort

This can be used to control the render order; see the implementation:

https://github.com/mbostock/d3/blob/master/src/core/selection.js#L510

Mike

[frank]

Thanks guys! This is really helpful!

[Jon Frost]

BTW, I did a quick look into the status of the render order discussions since it would be a helpful capability. 

The W3C folks tasklist shows that for SVG 2.0, which will probably be finalized in 2013, they will be implementing the z-index attribute after all.  Nothing we can use yet though.
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/z-index

     Jon