D3: Qu'est-ce qu'un Bisecteur?
je cherche à faire des graphiques avec D3, et suis tombé sur le d3.bisector. Cependant, je ne comprends pas ce que c'est ou ce que fait la documentation.
presque tous les exemples que je trouve dans le web utilisent un tableau de Date, similaire à l'exemple dans la documentation officielle:
var data = [
{date: new Date(2011, 1, 1), value: 0.5},
{date: new Date(2011, 2, 1), value: 0.6},
{date: new Date(2011, 3, 1), value: 0.7},
{date: new Date(2011, 4, 1), value: 0.8}
];
var bisect = d3.bisector(function(d) { return d.date; }).right;
alors que fait le bisecteur, à part choisir l'objet date à partir des éléments du tableau? Ce qui ne l' *.right retour?
et est-ce utile si j'ai un tableau simple à une dimension, comme var data = [3, 6, 2, 7, 5, 4, 8]?
Merci de m'éclairer.
2 réponses
L'idée sous-jacente derrière bisect c'est:
Considérons le tableau que vous mentionnez - var data = [3, 6, 2, 7, 5, 4, 8]
Vous souhaitez insérer une nouvelle valeur, disons 3.5 en data array et veulent savoir comment 'partition'. En d'autres termes, vous voulez savoir ce que serait l'indice d' 3.5 si elle a été insérée quand data tableau est trié.
var data = [3, 6, 2, 7, 5, 4, 8]
//Sorted data
[2, 3, 4, 5, 6, 7, 8]
//You want to insert 3.5
The sorted array after insertion of 3.5 should look something like:
[2, 3, 3.5, 4, 5, 6, 7, 8]
So the index of 3.5 in sorted data array is "2".
Il y a des situations où vous voudriez savoir comment l'insertion de cet élément 'coupe' ou 'divise' un tableau. Dans ce cas, vous voudriez d'abord trier ce tableau et faire ce que nous appelons un Recherche Binaire pour trouver la bonne position pour l'insertion de cet élément.
bisectLeft et bisectRight prendre soin de préciser l'anomalie dans une situation où vous voulez entrer un élément qui existe déjà dans le tableau. Disons que vous voulez entrer un autre 3 dans le tableau. Il y a deux situations:
3* -> The new element to be entered
[2, 3*, 3, 4, 5, 6, 7, 8] -> entered at "1" (array is still sorted)
[2, 3, 3*, 4, 5, 6, 7, 8] -> entered at "2" (array is still sorted)
donc dépendant sur la façon dont nous prenons soin de cette ambiguïté, nous pouvons entrer dans l'élément de la "gauche" ou "droite" de l'élément déjà existant. À partir de la docs (noter l'emphase):
le point d'insertion retourné I divise le tableau en deux moitiés de sorte que tout v < x pour v en array.tranche (lo, i) pour le côté gauche et tout v >= x pour v en array.tranche(i, hi) pour le côté droit.
bisectLeft on obtient 1 comme l' index approprié, toutes les entrées en double être à droite de cet index et la situation est exactement le contraire dans bisecRight.
Maintenant que vous savez comment bisectLeft et bisectRight travail, le bisector nous permet juste de définir un custom comparator ou accessor fonction pour définir les valeurs ou donner un sens à < et > sur les objets.
alors ce morceau de code:
var bisect = d3.bisector(function(d) { return d.date; }).right;
var bisect = d3.bisector(function(a, b) { return a.date - b.date; }).right;
spécifie l'utilisation d' bisectRight option et revenir un index adéquat pour l'insertion d'un élément en supposant que le tableau est trié par ordre croissant).
Donc, si je devais construire sur votre exemple, et en supposant un bisectorbisect. Et vous l'avez fait:
bisect(data, 3); //it would return 2.
j'espère que cela clarifie les choses et vous amène dans la bonne direction.
à Partir de la documentation (que vous avez lié à):
localisez le point d'insertion de x dans le tableau pour maintenir l'ordre trié.
Qu'est ce qu'elle fait. Il vous indique où un nouvel élément doit être inséré pour avoir encore un tableau trié après cela. Le tableau peut être n'importe quel type de structure, c'est pourquoi il y a une fonction accessor qui vous permet de "décomposer" cette structure pour les besoins de la recherche.
la différence entre gauche et les coupes à droite sont là où le point d'insertion est (à gauche ou à droite de l'élément le plus proche) -- que le tableau soit trié ascendant ou descendant.
un cas d'utilisation pour les bisecteurs est où vous voulez mettre en évidence le point de données le plus proche lorsque vous déplacez la souris sur un graphique, Voir par exemple cet exemple.