使用 d3.js 渲染组元素 (<g>) 的顺序答案

【问题标题】：Rendering order for group elements (<g>) with d3.js使用 d3.js 渲染组元素 (<g>) 的顺序
【发布时间】：2015-12-21 08:57:57
【问题描述】：

看了spec和this question我明白了，渲染顺序其实是一个时序。

<svg> 的子元素在 z 轴上按渲染时间排序，这意味着首先渲染的元素位于底部，最后渲染的元素位于所有其他元素的顶部同一地区。

这对于组元素 (<g>) 是否有所不同？

如果您查看this code (a JsFiddle) 和结果，辅助线（<line> 元素）位于图形线（<path> 元素）上方。辅助线在轴组内分组，每条图形线将绘制在一个单独的组中。

但是首先渲染轴，至少在 handleLine 运行之前调用函数 addYAxis。我在这里错过了什么？

注意：在this answer，处理图表中红色圆圈和蓝色方块的渲染，声明，

在这种情况下，即使蓝色方块是最后创建的，红色圆圈也会在蓝色方块上方可见。这是因为圆形和方形是不同组元素的子元素，它们按预先定义的顺序排列。

但我不明白，为什么这是可能的以及如何设置这个预定义的顺序。

【问题讨论】：

在对 SVG 元素进行任何其他操作之前，先定义 X 个组。添加它们的顺序定义了它们的深度。然后，您将孩子添加到它们的顺序无关紧要，它们的“基础”深度将始终取决于您将它们添加到的组。同一组的子级之间的深度取决于您添加它们的顺序，而不是您已添加的不同组的子级之间的深度。

标签： javascript d3.js svg

【解决方案1】：

好的，如果您希望轴线位于折线图的后面。

先做x轴组和y轴组，再做线组。这样可以确保保留订单。

在你的 setSVG 函数中做：

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');

现在当你让你的 x 轴选择它的组并在函数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);
}

工作示例here

【讨论】：