Javascript 使用d3.js的组元素（<；g>；）的呈现顺序

阅读之后，我明白了，渲染顺序实际上是一个计时顺序

的子元素在z轴上按照渲染的时间顺序排列，这意味着首先渲染的元素位于底部，最后渲染的元素位于同一区域中所有其他元素的顶部

组元素（

）的情况是否有所不同

如果查看结果，则辅助线（

元素）位于图形线（

元素）上方。辅助线在轴组中分组，每条图形线将在单独的组中绘制

但是首先呈现轴，至少在运行

handleLine

之前调用函数

addYAxis

。我错过了什么

---

注意：在中，处理图表中红色圆圈和蓝色正方形的渲染，说明

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

---

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

如果您希望轴线位于折线图后面，请确定

首先创建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和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);
}

工作示例
如果希望轴线位于折线图后面，请确定

首先创建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和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);
}

工作示例
在使用SVG元素执行任何其他操作之前，请定义X组。添加它们的顺序定义了它们的深度。然后，无论您将子项添加到它们的顺序如何，这些子项的“基础”深度始终取决于您将它们添加到的组。同一组的子级之间的深度将取决于您添加它们的顺序，而不是您已经添加的不同组的子级之间的深度。在使用SVG元素执行任何其他操作之前，请定义X个组。添加它们的顺序定义了它们的深度。然后，无论您将子项添加到它们的顺序如何，这些子项的“基础”深度始终取决于您将它们添加到的组。同一组的子级之间的深度将取决于您添加它们的顺序，而不是您已经添加的不同组的子级之间的深度。