Javascript SVG中的路径放在D3图表中圆圈的前面，不管追加的顺序如何

我的数据线应该放在圆圈的后面，但固执地拒绝这样做。首先，我认为这与追加的顺序有关，但显然不是。我也了解到了类似的问题。我希望这些圆点看起来像

我注意到，最后一个圆的行为实际上与预期一致。如果我先附加一组圆，它就在直线后面，在相反的情况下它就在前面。但所有其他数据点并不遵循相同的逻辑

一般来说，我将创建多个数据点的图表，所以这将是一个问题

我错过了什么

---

作为第二个问题，因为我刚刚从D3开始，我很乐意接受关于我的数据绑定方法以及元素创建和操作的结构化方法的评论，如果一个查看者发现一些代码味道。

原因是当您这样做时：

// Set of g elements in for the individual data points
var gees = graph1.selectAll("g").data(data).enter().append("g");

// Path appended BEFORE the circles
gees.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY)(data))
  .attr("class","dataPath");

您创建的路径数量与其数据数量相同

示例：如果数据长度为10，则绘制10条路径！。因此，每次在另一条路径上绘制新路径时。 然而，当你做圆的时候，这是正确的，数组的长度是10，所以10个圆

所以正确的方法是这样的：

//this will make a single path
graph1.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY)(data))
  .attr("class","dataPath");

工作代码

编辑

如果你看到你的DOM

<g>
   <path d="M10,395L30,346.23626273003947L50,348.88315845093945L70,325.8408757172729L90,361.79282401218563L110,337.23829975521113L130,271.36254043537434L150,326.84355151115744L170,296.18083274584734L190,239.00309425733596L210,246.4312641551351L229.99999999999997,261.73836974728044L250,222.77033711908345L270,175.77553751327844L290,202.07665355388494L310,162.47810406521793L330,161.2957419597571L350,131.1359499531521L370,129.23952903887664L390,139.51540231604645L410,144.10064067915437L430,126.07475247355066L449.99999999999994,114.16957928889813L470.00000000000006,47.3902223639799L490,67.03516083686108L510,10.340972431627879L530,5L550,27.22071082134911L570,52.42233413128351L590,17.020429086361613" class="dataPath"></path>
   <circle cx="10" cy="395" r="5" class="dataPoint"></circle>
   <line x1="10" y1="246.0618379173906" x2="10" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line>
   <line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line>
</g>

工作代码

---

希望这有帮助

这有帮助，但我仍然感到困惑，尽管现在已经不那么困惑了。我完全没有意识到我正在创造一系列的路径。现在，我知道了，我仍然不明白-即使我有30条路径，它们在圆之前渲染，所以与不必要路径的数量无关，这些路径应该仍然在圆之后。或者是因为我把这些吸盘放在单独的g元素中？是的，我可以看到线后面的所有圆圈，我在这里看到了很棒的网站！给你。我在圆顶上看到我的g被放置在路径之前。所以问题是如何改变追加的顺序。。。它似乎没有达到我期望的效果，即使是在你的小提琴上。我们如何推进路径，使其在svg中处于第一位？或者至少在gees之前？

<g>
   <path d="M10,395L30,346.23626273003947L50,348.88315845093945L70,325.8408757172729L90,361.79282401218563L110,337.23829975521113L130,271.36254043537434L150,326.84355151115744L170,296.18083274584734L190,239.00309425733596L210,246.4312641551351L229.99999999999997,261.73836974728044L250,222.77033711908345L270,175.77553751327844L290,202.07665355388494L310,162.47810406521793L330,161.2957419597571L350,131.1359499531521L370,129.23952903887664L390,139.51540231604645L410,144.10064067915437L430,126.07475247355066L449.99999999999994,114.16957928889813L470.00000000000006,47.3902223639799L490,67.03516083686108L510,10.340972431627879L530,5L550,27.22071082134911L570,52.42233413128351L590,17.020429086361613" class="dataPath"></path>
   <circle cx="10" cy="395" r="5" class="dataPoint"></circle>
   <line x1="10" y1="246.0618379173906" x2="10" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line>
   <line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line>
</g>

<g>
   <path d="M10,395L30,346.23626273003947L50,348.88315845093945L70,325.8408757172729L90,361.79282401218563L110,337.23829975521113L130,271.36254043537434L150,326.84355151115744L170,296.18083274584734L190,239.00309425733596L210,246.4312641551351L229.99999999999997,261.73836974728044L250,222.77033711908345L270,175.77553751327844L290,202.07665355388494L310,162.47810406521793L330,161.2957419597571L350,131.1359499531521L370,129.23952903887664L390,139.51540231604645L410,144.10064067915437L430,126.07475247355066L449.99999999999994,114.16957928889813L470.00000000000006,47.3902223639799L490,67.03516083686108L510,10.340972431627879L530,5L550,27.22071082134911L570,52.42233413128351L590,17.020429086361613" class="dataPath"></path>
   <circle cx="30" cy="346.23626273003947" r="5" class="dataPoint"></circle>
   <line x1="30" y1="246.0618379173906" x2="30" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line>
   <line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line>
</g>

//make the path first
graph1.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY)(data))
  .attr("class","dataPath");

//make the group
// Set of g elements in for the individual data points
var gees = graph1.selectAll("g").data(data).enter().append("g");
//add the circle to the group    
// Path appended BEFORE the circles
// Circles appended AFTER the path
gees.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize })
  .attr("class", "dataPoint");