Jak mogę doprowadzić koło do przodu z d3?

Question

Jak mogę doprowadzić koło do przodu z d3?

Po pierwsze, używam d3.js do wyświetlania kół różnej wielkości w tablicach. Po najechaniu myszką chcę, żeby krąg był większy, co mogę zrobić, ale nie mam pojęcia, jak go doprowadzić do przodu. Obecnie, po renderowaniu, jest ukryty za wieloma innymi kręgami. Jak mogę to naprawić?

Oto przykład kodu:

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

Próbowałem użyć metod sortowania i porządkowania, ale nie zadziałały. Jestem pewien, że nie zrobiłem tego poprawnie. Jakieś pomysły?

58

javascript d3.js visualization

Author: areke, 2013-01-05

Source

4 answers

Jeśli używasz metody moveToFront(), upewnij się, że podajesz drugi argument metody data() join, w przeciwnym razie Twoje dane nie będą zsynchronizowane z Twoim DOM.

D3.js łączy Twoje dane (dostarczone do metody parse()) z tworzonymi elementami DOM. Jeśli manipulujesz DOM jak zaproponowano powyżej, d3.js nie będzie wiedział, który element DOM odpowiada jakiemu "punktowi" danych, chyba że podasz unikalną wartość dla każdego "punktu" danych w wywołaniu data(), Jak pokazuje Referencja API :

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

21

Author: Henrik Nordberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-04 17:14:22

Z mojego bolesnego doświadczenia z IE9, używając parentNode.appendChild może prowadzić do utraty procedur obsługi zdarzeń w węzłach. Więc używam innego podejścia, czyli sortowania węzłów tak, aby wybrany był ponad innymi:

     .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;
            }
          }
        });
      })

13

Author: Ilya Boyandin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-06 14:24:32

Od wersji d3 4, istnieje zestaw wbudowanych funkcji, które obsługują tego typu zachowania bez konieczności implementowania ich samodzielnie. Więcej informacji można znaleźć w dokumentacji d3v4.

Krótka historia, aby przenieść element na przód, użyj selection.raise()

Wybór.raise ()

Ponownie wstawia każdy wybrany element, w kolejności, jako ostatni element potomny swojego rodzica. Odpowiednik:

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

13

Author: tmpearce,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-08 13:52:23

score 113 · Accepted Answer

Będziesz musiał zmienić kolejność obiektów i sprawić, że okrąg, który najedziesz, będzie ostatnim dodanym elementem. Jak widać tutaj: https://gist.github.com/3922684 i zgodnie z sugestią nautat , przed głównym skryptem należy zdefiniować:

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

Następnie będziesz musiał wywołać funkcję moveToFront na swoim obiekcie (powiedzmy circles) na mouseover:

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

Edit: zgodnie z sugestią Henrik Nordberg konieczne jest związanie dane do DOM za pomocą drugiego argumentu .data(). Jest to konieczne, aby nie stracić wiązania na elementach. Proszę przeczytać odpowiedź Henricka (i zagłosować!) po więcej informacji. Jako ogólną radę, Zawsze używaj drugiego argumentu .data() podczas wiązania danych z DOM, aby wykorzystać pełne możliwości wydajności d3.

Edit: Jak wspomniano przez Clemensa Tolbooma , funkcja odwrotna byłaby:

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