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 开始，我很乐意接受 cmets 关于我的数据绑定和构建元素创建和操作的方法，如果观众认识到一些代码味道。

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，你会更好地理解这个问题。

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

再次编辑

在直线上方画圈，如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

希望这会有所帮助！