D3.js - Selection API

Selekcje to potężna transformacja modelu obiektowego dokumentu (DOM) oparta na danych. Służy do ustawiania atrybutów, stylów, właściwości, HTML lub zawartości tekstowej i wielu innych. W tym rozdziale szczegółowo opisano interfejs API selekcji.

Konfiguracja API

Możesz skonfigurować interfejs API bezpośrednio za pomocą poniższego skryptu.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Metody wyboru interfejsu API

Poniżej przedstawiono najważniejsze metody w API selekcji.

• d3.selection()
• d3.select(selector)
• d3.selectAll(selector)
• selection.selectAll(selector)
• selection.filter(filter)
• selection.merge(other)
• d3.matcher(selector)
• d3.creator(name)
• selection.each(function)
• selection.call (funkcja [, argumenty…])
• d3.local()
• local.set (węzeł, wartość)
• local.get(node)
• local.remove(node)

Omówmy teraz szczegółowo każdą z nich.

d3.selection ()

Ta metoda służy do wybierania elementu głównego. Ta funkcja może być również używana do testowania wyborów lub do rozszerzania wyboru d3js.

d3.select (selektor)

Ta metoda służy do wybierania pierwszego elementu, który pasuje do określonego ciągu selektora.

Example - Rozważmy następujący przykład.

var body = d3.select("body");

Jeśli selektor nie jest łańcuchem, wybiera określony węzeł, który jest zdefiniowany poniżej.

d3.select("p").style("color", "red");

d3.selectAll (selektor)

Ta metoda wybiera wszystkie elementy, które pasują do określonego ciągu selektora.

Example - Rozważmy następujący przykład.

var body = d3.selectAll("body");

Jeśli selektor nie jest łańcuchem, wybiera określoną tablicę węzłów, która jest zdefiniowana poniżej.

d3.selectAll("body").style("color", "red");

selection.selectAll (selektor)

Ta metoda służy do wybierania elementu. Wybiera elementy podrzędne, które pasują do określonego ciągu selektora. Elementy w zwróconym wyborze są grupowane według odpowiadającego im węzła nadrzędnego w tym wyborze. Jeśli żaden element nie pasuje do określonego selektora dla bieżącego elementu lub jeśli selektor ma wartość null, grupa pod bieżącym indeksem będzie pusta.

Example - Rozważmy następujący przykład.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtr)

Ta metoda służy do filtrowania zaznaczenia, zwracając nowe zaznaczenie zawierające tylko elementy, dla których określony filtr ma wartość true.

Example - Rozważmy następujący przykład.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Tutaj filtrowanie wybranych wierszy tabeli zwraca tylko nieparzyste.

selection.merge (inne)

Ta metoda służy do zwracania nowego wyboru łączącego się z określonym innym wyborem.

Example - Rozważmy następujący przykład.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (selektor)

Ta metoda służy do przypisywania określonego selektora. Zwraca funkcję, która zwraca prawdę.

Example - Rozważmy następujący przykład.

var p = selection.filter(d3.matcher("p"));

d3.creator (nazwa)

Ta metoda służy do przypisania określonej nazwy elementu. Zwraca funkcję, która tworzy element o podanej nazwie przy założeniu, że jest to element nadrzędny.

Example - Rozważmy następujący przykład.

selection.append(d3.creator("p"));

selection.each (funkcja)

Ta metoda jest używana do wywołania określonej funkcji dla każdego wybranego elementu, w kolejności przekazanej przez bieżące odniesienie (d), bieżący indeks (i) i bieżącą grupę (węzły) z tym jako bieżący element DOM (węzły [i ]). Jest to wyjaśnione poniżej.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (funkcja [, argumenty…])

Służy do wywołania określonej funkcji dokładnie raz. Składnia jest pokazana poniżej.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Tę metodę można określić, jak pokazano poniżej.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local pozwala zdefiniować stan lokalny, który jest niezależny od danych.

Example - Rozważmy następujący przykład.

var data = d3.local();

W przeciwieństwie do var, wartość każdego local jest również określana przez DOM.

local.set (węzeł, wartość)

Ta metoda ustawia wartość tego lokalnego w określonym węźle na wartość.

Example - Rozważmy następujący przykład.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Ta metoda zwraca wartość tego lokalnego w określonym węźle. Jeśli węzeł nie definiuje tego lokalnego, zwraca wartość od najbliższego przodka, który go definiuje.

local.remove (węzeł)

Ta metoda usuwa wartość tego lokalnego z określonego węzła. Zwraca prawdę, jeśli zdefiniowano węzeł, w przeciwnym razie zwraca fałsz.