时间戳

首页 > 解决方案 > 将组元素重新排序为特定顺序

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

问题描述

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

<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>

标签： javascriptd3.jssvg

解决方案

D3 有一个非常方便的方法，名为sort()。不幸的是，要使这种方法起作用，您必须比较绑定到每个元素的数据，而他们现在没有。如果您不想绑定虚假数据，您可以随时使用纯 JavaScript。

因此，对于 using selection.sort()，我们将首先根据您的索引数组绑定数据（注意数组中的索引不是从零开始的事实）：

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>

推荐阅读