Existe-t-il des directives AngularJS pour D3JS?
Je vais avoir besoin de graphiques de base pour l’une de mes applications, mais je voudrais utiliser D3JS si je suis capable de le comprendre à temps pour répondre aux exigences du projet. Je développe encore ma compréhension de SVG et de D3JS afin de pouvoir l'utiliser efficacement. Jusqu'à présent, j'ai pu créer un graphique à barres très basique prenant des tableaux à 2 dimensions et affichant des graphiques à barres basés sur la longueur de chaque tableau dans le tableau. tableau de premier niveau. Cela fonctionne sacrément bien (bien qu'il puisse utiliser des étiquettes de décoration/axe, etc.). Le prochain type de graphique sur lequel j'allais travailler est un graphique à secteurs car ils sont également très courants.
Ce que je me demande, en gros, est-ce que quelqu'un sait si quelqu'un a déjà fait cela et a posté sur github (ou a partagé la source ailleurs) alors je n'ai pas à partir de zéro ici. Je réalise que D3JS est utilisé pour un affichage de données très personnalisé, mais je le veux vraiment pour les bases et la possibilité de le personnaliser. Donc, quiconque est au courant d'un effort pour créer des directives pour D3JS et/ou quelqu'un qui sait quelque part qui décrit tous les types de graphiques de base dans D3JS (je continue à trouver des exemples complexes, qui paraissent étonnants, mais je crains de ne pas comprendre/apprendre d'eux ).
En gros, je voudrais juste avoir un moyen facile d’accéder (puis d’être stylé) aux graphiques suivants: barre, ligne, camembert (d’autres types de graphiques standard auxquels je ne pense pas sont les bienvenus). J'ai également vu les options Google Charts et High Charts, qui sont à la fois sympas et vous donnent un peu de ce temps, mais je préfère une approche de mise en place plutôt qu'une réduction de niveau la plupart du temps.
De plus, je connais et ai utilisé cet article pour créer le graphique à barres dont j'avais besoin (en le mélangeant avec un autre didacticiel D3JS simple ), mais y a-t-il davantage d'efforts connus de tous?
Voici mon diagramme à barres de base jusqu'à présent:
.directive('barChart', function ( /* dependencies */ ) {
// define constants and helpers used for the directive
var width = 500,
height = 80;
return {
restrict: 'E', // the directive can be invoked only by using <bar-chart></bar-chart> tag in the template
scope: { // attributes bound to the scope of the directive
val: '='
},
link: function (scope, element, attrs) {
// initialization, done once per my-directive tag in template. If my-directive is within an
// ng-repeat-ed template then it will be called every time ngRepeat creates a new copy of the template.
// set up initial svg object
var vis = d3.select(element[0])
.append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height);
// whenever the bound 'exp' expression changes, execute this
scope.$watch('val', function (newVal, oldVal) {
// clear the elements inside of the directive
vis.selectAll('*').remove();
// if 'val' is undefined, exit
if (!newVal) {
return;
}
var totalDataSetSize = 0;
for (var i = 0; i < newVal.length; i++) {
totalDataSetSize += newVal[i].length
};
function calcBarWidth(d) {
return (totalDataSetSize==0)?0:d.length/totalDataSetSize*420;
}
vis.selectAll("rect")
.data(newVal)
.enter().append("rect")
.on("click", function(d,i) {alert("Total gardens: "+ d.length)})
.attr("y", function(d, i) { return i*20; })
.attr("width", calcBarWidth)
.attr("height", function(d) {return 20});
vis.selectAll("text")
.data(newVal)
.enter().append("text")
.attr("x", function(d) { return calcBarWidth(d)+50})
.attr("y", function(d, i) { return (i+1)*20; })
.attr("dx", -3) // padding-right
.attr("dy", "-.3em") // vertical-align: middle
.style("font-size", ".7em")
.attr("fill", "black")
.attr("text-anchor", "end") // text-align: right
.text(function(d,i){ var yesOrNo = i?" No":" Yes"; return d.length.toString() + yesOrNo})
},true);
}
};
});
Tous les conseils/indications sur ce code sont également les bienvenus, comme je l’ai dit, toujours novice avec D3JS et relativement nouveau pour Angular.
Concernant l’utilisation de D3.js avec Angular JS, consultez cet article => http://www.ng-newsletter.com/posts/d3-on-angular.html
Il y a 2 projets github concernant la directive angulaire pour d3.js:
Hmm ok apparemment, mes recherches initiales n'étaient pas très bonnes, je suis tombé sur ce qui semble couvrir tout ce que je veux:
http://phloxblog.in/angulard3/start.html#.Ui9XPBKJB-M
Encore s'il y a des alternatives, je suis ouvert à les entendre/les voir aussi. Si je ne vois pas de meilleure réponse le lendemain, j'accepterai cette réponse.
-------------------------- Éditer 1
De plus, si quelqu'un sait pourquoi le prototype est utilisé ici, j'aimerais savoir que je vais essayer de supprimer sa dépendance, car je préfère ne pas introduire plus de code si je n'en ai pas besoin.
-------------------------- Édition 2
Pour en savoir plus sur le sujet, il existe d’autres exemples qui ont également une configuration de classe dans le but d’abstraire/découpler le code D3 du code AngularJS (permettre l’extension est un argument que j’ai vu).
J'ai construit un ensemble de directives extensibles pour utiliser D3 pour construire des graphiques. Ils sont assez flexibles et je les utilise déjà beaucoup. Vous pouvez obtenir le paquet de Bower ainsi que "angularD3".
L'idée de base est de construire des graphiques de manière déclarative tout en permettant l'accès aux aspects les plus puissants de D3 et en offrant une extensibilité pour le développement ultérieur de directives personnalisées.
La directive racine <d3-chart> sert de conteneur et de contrôleur pour les divers composants de graphique tels que les axes, les lignes, les aires, les arcs, les gradients, etc. La d3ChartController vous permet d'écrire facilement vos propres directives de graphique personnalisées. Nous l'utilisons nous-mêmes pour certaines étiquettes personnalisées et autres.
Voici un exemple de la façon dont les choses sont déclarées:
<d3-data src="data/data.csv" data="line" columns="year, savings, total, optimal"></d3-data>
<d3-data src="data/donutData.csv" data="pie" columns="age,population"></d3-data>
<div d3-chart>
<d3-axis data="line" name="year" label="Year" extent="true" orientation="bottom" ticks="5"></d3-axis>
<d3-axis data="line" name="savings" label="Deposits" orientation="left" ticks="5"></d3-axis>
<d3-axis data="line" name="total" label="Savings" orientation="right" ticks="5"></d3-axis>
<d3-line data="line" x="year" y="optimal" yscale="total"></d3-line>
</div>
Il y a aussi dangle.js . C'est supposé être destiné aux résultats de elasticsearch, mais franchement, il est suffisamment robuste pour que vous puissiez l'utiliser pour de nombreux autres cas d'utilisation.
Je serais gentil si AngularJS pouvait intégrer d3 comme ils l’ont fait avec bootstrap. Il n’ya vraiment rien de nouveau sur ce sujet (angular & d3). La plupart des directives d3 (sauf nvd3) ont deux ans. Voici un autre article de 2013 mais l'idée est plus durable. Vous utilisez le plus récent d3 pour les calculs uniquement. Et vous utilisez native angular pour la manipulation du dom. L'inconvénient est que je n'ai pas pu faire fonctionner les transitions avec cette approche.