javascript - 将组元素重新排序为特定顺序

Question

我在另一个组中有多个组，并且我想按特定顺序对它们重新排序。

<svg>
    <g id="wrapper">
        <g id="b">...</g>
        <g id="a">...</g>
        <g id="c">...</g>
        <g id="e">...</g>
        <g id="d">...</g>
    </g>
</svg>

包装组内的每个组都有一个 id，现在 id 的顺序是 b、a、c、e、d。假设我想用数组 [3, 1, 4, 5, 2] 对其进行排序，那么相应的顺序将是 c, b, e, d, a。

结果是，

<svg>
    <g id="wrapper">
        <g id="c">...</g>
        <g id="b">...</g>
        <g id="e">...</g>
        <g id="d">...</g>
        <g id="a">...</g>
    </g>
</svg>

Answer 1

D3有一个非常方便的方法，名为sort() 。不幸的是，要使此方法发挥作用，您必须比较绑定(bind)到每个元素的数据，而它们现在没有数据。如果您不想绑定(bind)虚假数据，您始终可以使用纯 JavaScript。

因此，为了使用 selection.sort()，我们首先根据索引数组绑定(bind)数据(请注意数组中的索引不是从零开始的):

const order = [3, 1, 4, 5, 2];
const groups = d3.selectAll("#wrapper g");
groups.each(function(_, i) {
  d3.select(this).datum({
    position: i + 1
  })
});

或者只是:

const order = [3, 1, 4, 5, 2];
const groups = d3.selectAll("#wrapper g");
groups.datum(function(_, i) {
  return {
    position: i + 1
  }
});

之后，这只是一个问题:

groups.sort(function(a, b) {
  return order.indexOf(a.position) - order.indexOf(b.position)
});

这是演示:

const order = [3, 1, 4, 5, 2];
const groups = d3.selectAll("#wrapper g");
groups.datum(function(_, i) {
  return {
    position: i + 1
  }
});
groups.sort(function(a, b) {
  return order.indexOf(a.position) - order.indexOf(b.position)
});

console.log((new XMLSerializer()).serializeToString(d3.select("svg").node()))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
    <g id="wrapper">
        <g id="b"></g>
        <g id="a"></g>
        <g id="c"></g>
        <g id="e"></g>
        <g id="d"></g>
    </g>
</svg>

如果您检查 SVG，这就是结果:

<svg>
    <g id="wrapper">
        <g id="c"></g>
        <g id="b"></g>
        <g id="e"></g>
        <g id="d"></g>
        <g id="a"></g>
    </g>
</svg>