D3.js - Shapes API
W tym rozdziale omówiono różne generatory kształtów w D3.js.
Konfigurowanie API
Możesz skonfigurować interfejs API kształtów przy użyciu następującego skryptu.
<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>
</script>
Generatory kształtów
D3.js obsługuje różne kształty. Przyjrzyjmy się szczegółowo widocznym kształtom.
Arcs API
Generator łuku tworzy kształt koła lub pierścienia. Użyliśmy tych metod API w poprzednim rozdziale o wykresach kołowych. Przyjrzyjmy się szczegółowo różnym metodom interfejsu API Arcs.
d3.arc() - Ta metoda służy do tworzenia nowego generatora łuku.
arc(args)- Służy do generowania łuku z określonymi podanymi argumentami. Poniżej zdefiniowano domyślne ustawienia promieni i kątów obiektu.
<script>
var arc = d3.arc();
arc({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2
});
</script>
arc.centroid(args) - Ta metoda jest używana do obliczenia środka [x, y] linii środkowej łuku z określonymi argumentami.
arc.innerRadius([radius])- Ta metoda służy do ustawienia wewnętrznego promienia z podanego promienia i zwrócenia generatora łuku. Jest zdefiniowany poniżej -
function innerRadius(d) {
return d.innerRadius;
}
arc.outerRadius([radius])- Ta metoda służy do ustawienia promienia zewnętrznego z podanego promienia i zwrócenia generatora łuku. Jest zdefiniowany w następujący sposób.
function outerRadius(d) {
return d.outerRadius;
}
arc.cornerRadius([radius])- Ta metoda służy do ustawienia promienia narożnika z podanego promienia i zwrócenia generatora łuku. Jest zdefiniowany w następujący sposób.
function cornerRadius() {
return 0;
}
Jeśli promień narożnika jest większy od zera, narożniki łuku są zaokrąglane przy użyciu okręgów o podanym promieniu. Promień narożnika nie może być większy niż (externalRadius - innerRadius) / 2.
arc.startAngle([angle])- Metoda ta służy do ustawienia kąta początkowego funkcji od podanego kąta. Jest zdefiniowany w następujący sposób -
function startAngle(d) {
return d.startAngle;
}
arc.endAngle([angle])- Metoda ta służy do ustawienia kąta końcowego funkcji od podanego kąta. Jest zdefiniowany w następujący sposób.
function endAngle(d) {
return d.endAngle;
}
arc.padAngle([angle])- Metoda ta służy do ustawienia kąta padu do funkcji od podanego kąta. Jest zdefiniowany w następujący sposób.
function padAngle() {
return d && d.padAngle;
}
(x) arc.padRadius([radius])- Ta metoda służy do ustawienia promienia podkładki na określoną funkcję z podanego promienia. Promień padu określa stałą odległość liniową oddzielającą sąsiednie łuki, zdefiniowaną jako padRadius * padAngle.
(xi) arc.context([context]) - Ta metoda służy do ustawiania kontekstu i zwracania generatora łuku.
Pies API
Ten interfejs API służy do tworzenia generatora kołowego. Te metody API wykonaliśmy w poprzednim rozdziale. Omówimy szczegółowo wszystkie te metody.
d3.pie() - Konstruuje nowy generator kołowy z ustawieniami domyślnymi.
pie(data[, arguments])- Ta metoda służy do generowania kołowego dla podanych wartości tablicy. Zwraca tablicę obiektów. Obiekty są kątami łuku punktu odniesienia. Każdy obiekt ma następujące właściwości -
data- dane wejściowe; odpowiedni element w tablicy danych wejściowych.
value - wartość liczbowa łuku.
index - indeks łuku.
startAngle - kąt początkowy łuku.
endAngle - kąt końcowy łuku.
padAngle - kąt padu łuku.
pie.value([value])- Ta metoda służy do ustawiania wartości określonej funkcji i generuje ciasto. Jest zdefiniowany w następujący sposób -
function value(d) {
return d;
}
pie.sort([compare])- Ta metoda służy do sortowania danych do określonej funkcji i generuje ciasto. Funkcja komparatora jest zdefiniowana w następujący sposób.
pie.sort(function(a, b)
{ return a.name.localeCompare(b.name); }
);
W tym przypadku funkcja porównania przyjmuje dwa argumenty „a” i „b”, każdy element z tablicy danych wejściowych. Jeśli łuk „a” powinien znajdować się przed łukiem „b”, wówczas komparator musi zwrócić liczbę mniejszą od zera. Jeśli łuk „a” powinien znajdować się po łuku „b”, wówczas komparator musi zwrócić liczbę większą od zera.
pie.sortValues([compare])- Ta metoda służy do porównywania wartości z danej funkcji i generowania kołowego. Funkcja jest zdefiniowana w następujący sposób.
function compare(a, b) {
return b - a;
}
pie.startAngle([angle])- Ta metoda służy do ustawiania kąta początkowego ciasta zgodnie z określoną funkcją. Jeśli kąt nie jest określony, zwraca bieżący kąt początkowy. Jest zdefiniowany w następujący sposób.
function startAngle() {
return 0;
}
pie.endAngle([angle])- Ta metoda służy do ustawiania kąta końcowego ciasta na określoną funkcję. Jeśli kąt nie jest określony, zwraca bieżący kąt końcowy. Jest zdefiniowany w następujący sposób.
function endAngle() {
return 2 * Math.PI;
}
pie.padAngle([angle])- Ta metoda służy do ustawiania kąta padu na określoną funkcję i generowania ciasta. Funkcja jest zdefiniowana w następujący sposób.
function padAngle() {
return 0;
}
Lines API
Lines API służy do generowania linii. Użyliśmy tych metod API wGraphsrozdział. Przeanalizujmy szczegółowo każdą metodę.
d3.line() - Ta metoda służy do tworzenia nowego generatora linii.
line(data) - Ta metoda służy do generowania wiersza dla podanej tablicy danych.
line.x([x])- Ta metoda służy do ustawiania metody dostępu x do określonej funkcji i generuje linię. Funkcja została zdefiniowana poniżej,
function x(d) {
return d[0];
}
line.y([y])- Ta metoda służy do ustawiania metody dostępu „y” do określonej funkcji i generuje linię. Funkcja jest zdefiniowana w następujący sposób.
function y(d) {
return d[1];
}
line.defined([defined])- Ta metoda służy do ustawiania zdefiniowanego akcesorium do określonej funkcji. Jest zdefiniowany w następujący sposób.
function defined() {
return true;
}
line.curve([curve]) - Służy do ustawiania krzywej i generowania linii.
line.context([context])- Ta metoda służy do ustawiania kontekstu i generowania linii. Jeśli kontekst nie jest określony, zwraca wartość null.
d3.lineRadial()- Ta metoda służy do tworzenia nowej linii promieniowej; jest odpowiednikiem generatora linii kartezjańskiej.
lineRadial.radius([radius])- Ta metoda służy do rysowania linii promieniowej, a metoda dostępu zwraca promień. Zajmuje odległość od początku (0,0).
W następnym rozdziale dowiemy się o API kolorów w D3.js.