アプリの 1 つにいくつかの基本的なチャートが必要になる予定ですが、プロジェクトの要件を満たすのに間に合うように頭を包むことができれば、D3JS を使用したいと考えています。SVG と D3JS を効果的に使用できるように、私はまだ SVG と D3JS の理解を深めています。これまでのところ、2 次元配列を取り、各配列の長さに基づいて棒グラフを表示する非常に基本的な棒グラフを作成できました。トップレベルの配列。これはかなりうまく機能します（ただし、装飾/軸ラベルなどを使用できます）。次に取り組む予定のグラフは円グラフです。これらも非常に一般的だからです。
基本的に私が疑問に思っているのは、誰かが既にこれを行って github に投稿した (または他の場所でソースを共有した) かどうかを知っているので、ここでゼロから始める必要はありません。D3JS は非常にカスタムなデータ表示を行うために使用されていることは認識していますが、基本機能とカスタマイズ機能が必要なだけです。D3JS のディレクティブを作成する取り組みを知っている人、および/または D3JS のすべての基本的なチャート タイプの概要を説明している場所を知っている人はいますか (私は複雑な例を見つけ続けていますが、それらは素晴らしく見えますが、理解/学習できないのではないかと心配しています) ）。
基本的には、棒グラフ、折れ線グラフ、円グラフ (私が考えていない他の標準的なグラフの種類は大歓迎です) をドロップイン (およびスタイル) する簡単な方法が欲しいだけです。また、私は Google Charts と High Charts のオプションを見てきました。どちらも素晴らしく、すぐに使えるものですが、私はほとんどの場合、削除するよりも構築するアプローチを好みます.
また、私はこの記事を認識して使用して、必要な元の棒グラフを作成しました (それを別のストレートな D3JS チュートリアルと混ぜて) ですが、他に誰かが知っている取り組みはありますか?
これまでの私の基本的な棒グラフは次のとおりです。
.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の完全な初心者であり、Angularにはまだかなり慣れていないと言ったので、このコードに関するヒント/ポインタも大歓迎です。