Мне понадобятся некоторые базовые диаграммы для одного из моих приложений, но я бы хотел использовать D3JS, если мне удастся обогнуть его вокруг, чтобы выполнить требования к проекту. Я по-прежнему развиваю свое понимание SVG и D3JS, поэтому могу эффективно использовать его, до сих пор я смог создать очень базовую гистограмму, которая берет 2-мерные массивы и показывает гистограммы, основанные на длине каждого массива в массив верхнего уровня. Это очень хорошо работает (хотя он может использовать некоторые метки украшения/оси и т. Д.). Следующий вид диаграммы, на которой я собирался работать, - это круговая диаграмма, так как они очень распространены.Существуют ли у AngularJS директивы для D3JS?
В принципе, мне интересно, кто-нибудь знает, кто-то уже это сделал и отправил в github (или поделился источником в другом месте), поэтому мне не нужно начинать с нуля здесь. Я понимаю, что D3JS используется для отображения пользовательских данных, но я просто хочу, чтобы это было основополагающим, а также возможностью настройки. Так кто знает об усилиях по созданию директив для D3JS и/или тех, кто знает о чем-то, где описываются все основные типы диаграмм в D3JS (я продолжаю находить сложные примеры, которые выглядят потрясающе, но я боюсь, что я не буду понимать/учиться у них).
В принципе, я хотел бы просто иметь простой способ забросить (а затем стиль) следующие диаграммы: bar, line, pie (другие стандартные типы диаграмм, о которых я не думаю, приветствуются). Также я видел варианты Google Charts и High Charts, которые оба хороши и дают вам немного этого из коробки, но чаще всего предпочитаю наращивание, а не большую часть полосы.
Также я знаю и использовал this article, чтобы сделать исходную гистограмму, в которой я нуждался (смешивая ее с another straight D3JS tutorial), но есть ли больше усилий, о которых кто-либо знает?
Вот моя основная гистограмма до сих пор:
.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);
}
};
});
Любые советы/указатели на этом коде приветствуется, а также, как я до сих пор говорю, полный новичок с D3JS и все еще достаточно новый для Угловых.
Не угловые директивы, но [NVD3] (http://nvd3.org/) включает в себя множество базовых и расширенных типов диаграмм, которые вы можете обернуть в такие директивы. –
Вы проверили http://n3-charts.github.io/line-chart/? – LoremIpsum
Проверьте [angular-nvd3] (http://krispo.github.io/angular-nvd3) директиву для nvD3.js. Эта директива повторно используется и может взаимодействовать с полным nvd3 api через JSON. – krispo