Как я могу выявить круг с d3?

Question 1

В первую очередь, я использую d3.js для отображения разного размера кругов в массивах. На мыши, я хочу, чтобы круг, являющийся moused, стал больше, который я могу сделать, но я понятия не имею, как выявить его. В настоящее время, после того как это представляется, это скрыто позади нескольких других кругов. Как я могу зафиксировать это?

Вот пример кода:

   .on("mouseover", function() { 
    d3.select(this).attr("r", function(d) { return 100; })
  })

Я пытался использовать вид и методы порядка, но они не работали. Я вполне уверен, я не сделал этого правильно. Какие-либо мысли?

Question 2

Необходимо будет изменить порядок объекта и сделать круг Вами наведение мыши, являющееся последним элементом добавленный. Поскольку Вы видите здесь: https://gist.github.com/3922684 и, как предложено nautat, необходимо определить следующее перед основным сценарием:

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

Затем необходимо будет просто звонить эти moveToFront функция на объекте (скажите circles) на наведении мыши:

circles.on("mouseover",function(){
  var sel = d3.select(this);
  sel.moveToFront();
});

Редактирование: , Как предложил Henrik Nordberg необходимо связать данные с DOM при помощи второго аргумента .data(). Это необходимо для не потери привязывания элементов. Прочитайте ответ Henrick (и upvote это!) для большего количества информации Как общие рекомендации, всегда используйте второй аргумент .data(), когда обязательные данные к DOM для усиления полной производительности d3.

<час>

Редактирование: , Как упомянуто [1 110] Clemens Tolboom , обратная функция была бы:

d3.selection.prototype.moveToBack = function() {
    return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
        }
    });
};

Question 3

Question 4

Если Вы используете moveToFront() метод, удостоверьтесь, что Вы указываете второй аргумент data() метод соединения, или Ваши данные будут вне синхронизации с Вашим DOM.

d3.js присоединяется к Вашим данным (предоставленный parse()) метод с элементами DOM, которые Вы создаете. При управлении DOM, как предложено выше d3.js не будет знать, какой элемент DOM соответствует тому, на что 'указывают' данные, если Вы не указываете уникальное значение для каждых данных 'точка' в эти data() вызов как ссылка API шоу:

.data(data, function(d) { return d.name; })

Question 5

С d3 версии 4 существует ряд, созданный в функциях, которые обрабатывают этот тип поведения, не будучи должен реализовать его самостоятельно. Посмотрите d3v4 документация для большего количества информации

, Короче говоря, для выявления элемента, используйте selection.raise()

, selection.raise ()

Повторно вставляет каждый выбранный элемент, в порядке, как последний ребенок его родителя. Эквивалентный:

selection.each(function() {
this.parentNode.appendChild(this);
});

Question 6

На основе моего болезненного опыта с IE9, с помощью parentNode.appendChild может привести к потерянным обработчикам событий в узлах. Таким образом, я склонен использовать другой подход, то есть, сортируя узлы так, чтобы выбранный был выше других:

     .on("mouseover", function(selected) {
        vis.selectAll('.node')
        .sort(function(a, b) {
          if (a.id === selected.id) {
            return 1;
          } else {
            if (b.id === selected.id) {
              return -1;
            } else {
              return 0;
            }
          }
        });
      })

Wernsey · Accepted Answer · 31 October 2019 в 13:23