Подтвердить что ты не робот

D3.js - как вставлять новые элементы брата

У меня возникла проблема с вставкой новых братьев и сестер в существующие элементы.

У меня есть эта структура

<svg> 
  <g> 
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

и хотите эту структуру

<svg> 
  <g> 
    <path class="data"></path> 
    <text></text>
    <path class="data"></path> 
    <text></text>
  </g>
</svg>

но если я использую функцию вставки d3.js

d3.select("g").insert("text", "path.data");

я получаю следующее (несмотря на выбор по имени класса)

<svg> 
  <g> 
    <text></text>
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

любые идеи?

Ответ 1

Прежде всего, стоит отметить, что второй аргумент в функции insert является селектором до. Кроме того, цепные операции действуют по левому результату.

Итак, вы сделали

// select all the g elements (only 1)
d3.select("g")
    // For each g, insert a text element before "path.data"
    .insert("text", "path.data");

Вы хотите выполнить операцию для каждого дочернего ".data", поэтому вам нужно выбрать каждый из элементов ".data" и выполнить действие для каждого из них. Я не совсем уверен, как d3 ожидает, что вы введете элемент после определенного дочернего элемента. Мне гораздо проще использовать DOM API для создания и вставки элемента, но с помощью функции d3.each для итерации по выбору.

d3.selectAll("g > .data").each(function () {
    var t = document.createElement('text');
    this.parentNode.insertBefore(t, this.nextSibling);       
});