javascript - SVG 中的路径放置在 D3 图表中的圆圈前面，尽管附加顺序

Question

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

我注意到最后一个圆圈的行为确实符合预期。如果我首先附加一组圆圈，它会在线后面，而在相反的情况下它会在线。但是所有其他数据点都不遵循相同的逻辑。

通常，我会创建包含多个数据点的图表，所以这会是个问题...

我在 my chart 中缺少什么？

gees.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY)(data));
gees.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize });

作为一个次要问题，因为我刚刚开始使用 D3，我很乐意接受对我的数据绑定(bind)方法以及构建元素创建和操作的方法的评论，如果观众认识到一些代码味道。

Answer 1

原因是当你这样做的时候:

// 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");

工作代码here

编辑

如果你看到你的 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>

然后下一个 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="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>

因此您正在创建新的组，并且正在添加圆圈和路径 DOM。

我想如果你检查你的 DOM 你会更好地理解这个问题。

在我的 fiddle 中，线在圆圈后面，最后一个出现在前面，原因是线只到最后一个圆圈的中心。

再次编辑

使圆圈像this一样在线上方

//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");

工作代码 here

希望这对您有所帮助!