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()。不幸的是，要使此方法起作用，您必须比较绑定到每个元素的 data ，而现在它们都没有。如果您不想绑定虚假数据，则可以始终使用纯JavaScript。

因此，对于使用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>

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

1 个答案: