Переупорядочить элементы группы в определенном порядке

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>

Каждая группа внутри группы-оболочки имеет идентификатор, сейчас порядок идентификаторов b,а, с, е, д.Скажем, я хочу заказать его с массивом [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 () .К сожалению, чтобы этот метод работал, вы должны сравнить данные , привязанные к каждому элементу, а у них их нет прямо сейчас.Если вы не хотите связывать фиктивные данные, вы всегда можете использовать для этого чистый 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>