javascript - D3 - 为什么这个排序函数没有更新其选择中的所有元素？

Question

我正在制作一个 D3 可视化 sorts circle elements (each circle is a planet) 。有一个可视化函数可以为每个行星创建一个圆圈，如下所示:

<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，它将行星/圆圈按降序或升序排列。

    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)
            .attr("cx", function(d,i){
                return ((width * 0.99) / radiuses.length) * i + 50; 
            });
            // other stuff... 
    }

排序函数确实正确地对圆圈进行了排序(即，它在视觉上是正确的)，但是当我检查 DOM 时，我发现在调用排序之后，所有圆圈都像这样附加到第一个 g 元素，其他 7 个元素也被添加到第一个 g 元素中。 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 元素？ Planets 是 selectAll("circle") 选择。

我已将所有内容放在 gist here 中。

Answer 1

这里的问题是您的planes选择实际上是circle元素的数组，而不是g元素。要解决此问题，请确保为变量 planets 分配了 g 元素，然后在后缀添加 circles 。在排序函数中，您需要更新以对 g 元素进行排序，然后更新每个元素中的 circle。

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){ ...