Javascript D3-为什么此排序函数不更新其选择中的所有元素？

我正在做一个D3可视化。有一个可视化功能，可以为每个行星创建一个圆，如下所示：

<g class="planet">
   <circle class="Mercury" r="1.6264266666666667" cy="90" cx="50" fill="#333">
</g>
<g class="planet">
   <circle class="Venus" r="4.034393333333334" cy="90" cx="198.5" fill="#333">
</g>
<g class="planet">
   <circle class="Earth" r="4.252066666666667" cy="90" cx="347" fill="#333">
</g>
...

sort函数确实正确地对圆进行排序（即，它在视觉上是正确的），但是当我检查DOM时，我发现在调用sort之后，所有的圆都会像这样附加到第一个g元素，而其他7个g元素则被清空：

<g class="planet">
 <circle class="Jupiter" r="47.661786666666664" cy="90" cx="50" fill="#333">
 <circle class="Saturn" r="40.17809333333334" cy="90" cx="198.5" fill="#333">
 <circle class="Uranus" r="17.03816666666667" cy="90" cx="347" fill="#333">
 <circle class="Neptune" r="16.510906666666667" cy="90" cx="495.5" fill="#333">
 ...
 <circle class="Mercury" r="1.6264266666666667" cy="90" cx="1089.5" fill="#333">
</g>
<g class="planet"></g>
<g class="planet"></g>
...

...
...

为什么我的排序函数只选择第一个g元素而不是选择中的所有g元素？行星是一个selectAll（“圆”）选择

---

我把所有的东西都放在一个盒子里

这里的问题是，您的

行星

选择实际上是

圆

元素的数组，而不是

g

元素。要解决此问题，请确保为变量

planets

分配了

g

元素，然后附加

圆圈

后缀。在排序函数中，您需要更新以对

g

元素进行排序，然后更新每个元素中的

圆圈

planets = solarSystem.selectAll("g.planet")
    .data(planetaryData)
    .enter()
    .append("g")
    .classed("planet", true);

planets.append("circle")
    .attr({ ...


var sort = function(){

    planets
    .sort(function(a, b) {
          if(orderOfAppearance){
          return d3.descending(a["Equatorial radius (KM)"], b["Equatorial radius (KM)"]);
          }
          else{
          return d3.ascending(a["Mean distance from Sun (AU)"], b["Mean distance from Sun (AU)"]);
          }


          })
    .transition()
    .duration(1500)
    .select("circle")
    .attr("cx", function(d,i){ ...

planets = solarSystem.selectAll("g.planet")
    .data(planetaryData)
    .enter()
    .append("g")
    .classed("planet", true);

planets.append("circle")
    .attr({ ...


var sort = function(){

    planets
    .sort(function(a, b) {
          if(orderOfAppearance){
          return d3.descending(a["Equatorial radius (KM)"], b["Equatorial radius (KM)"]);
          }
          else{
          return d3.ascending(a["Mean distance from Sun (AU)"], b["Mean distance from Sun (AU)"]);
          }


          })
    .transition()
    .duration(1500)
    .select("circle")
    .attr("cx", function(d,i){ ...