Rendering order for group elements () with d3.js

Question

After reading the spec and this question I've understood, that the rendering order is actually a timing order.

The sub-elements of an <svg> are ordered in the z-axis regarding the timing of the rendering, meaning the element, which has been rendered first lies on bottom, the lastly rendered element on top of all others in the same area.

Is this differently for group elements (<g>)?

If you look at this code (a JsFiddle) and the outcome, the helper lines (<line> elements) lie above the graph lines (<path> elements). The helper lines are grouped within the axis group, each graph line would be drawn in a separate group.

But the axes are rendered first, at least the function addYAxis is called before handleLine runs. What am I missing here?

Note: in this answer, dealing with the rendering of red circles and blue squares in a chart, is stated, that

In this case the red circle will be visible above the blue square even though the blue square was created last. This is because the circle and the square are children of different group elements, which are in a pre-defined order.

But I don't get, why this is possible and how I can set this pre-defined order.

Before doing anything else with the SVG element you define X groups. The order in which you add them defines their depth. Then it won't matter what order you add children to them, the "base" depth of those will always depend on the group you're adding them to. Depth between children of the same group will depend on the order you are adding them, but not between children of different groups you've already added. — Sergiu Paraschiv, Dec 21 '15 at 09:05

score 0 · Accepted Answer · answered Dec 21 '15 at 09:24

Ok if you want the axis lines to be behind the line charts.

First make a x-axis group and y axis group then make the line group. This ensures the oder is preserved.

Inside your setSVG function do:

parts.svg.append('defs').append('clipPath') //add a clip
  .attr('id', lineWrapperId)
  .append('rect')
  .attr({
      width: basics.width + 'px',
      height: basics.height + 'px'
  });
parts.svg.append('g') // add x axis g
  .attr('class', 'x-axis');
parts.svg.append('g') // add y axis g
  .attr('class', 'y-axis');
//finally add line group
parts.pathFrame = parts.svg.append('g') // add lines group
  .attr('clip-path', 'url(#' + lineWrapperId + ')')
  .attr('class', 'line-wrapper');

Now when you make your x axis select its group and make the axis like below in function addXAxis and addYAxis:

if (!parts.axisX) {
  parts.axisX =   d3.select(".x-axis") //selectin the x axis group
    .attr({
    'class': 'x-axis',
    transform: 'translate(0,' + (basics.height - basics.margin) + ')'
  })
    .call(xAxis); // leave out tick sizes for now
} else {
  parts.axisX = d3.select('g.x-axis')
    .call(xAxis);
}

Working example here

Rendering order for group elements () with d3.js

1 Answers1