【发布时间】：2013-09-14 12:44:02
【问题描述】：
我的一个应用程序需要一些基本图表，但如果我能够及时了解它以满足项目要求，我想使用 D3JS。我仍在发展我对 SVG 和 D3JS 的理解，因此我可以有效地使用它，到目前为止，我已经能够制作一个非常基本的条形图，它采用二维数组并根据每个数组的长度显示条形图顶级数组。这很好用（尽管它可以使用一些装饰/轴标签等）。我打算制作的下一种图表是饼图，因为它们也很常见。
基本上我想知道的是，有谁知道是否有人已经这样做并发布到 github（或在其他地方共享源），所以我不必从头开始。我意识到 D3JS 用于进行非常自定义的数据显示，但我真的只是想要它用于基础知识以及自定义的能力。是否有人知道为 D3JS 创建指令的努力和/或任何知道概述 D3JS 中所有基本图表类型的地方的人（我一直在寻找复杂的示例，这些示例看起来很神奇，但我担心我不会理解/从中学习)。
基本上，我只想有一种简单的方法来插入（然后设置样式）以下图表：条形图、折线图、饼图（欢迎使用其他我没有想到的标准图表类型）。此外，我还看到了 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 的新手，对 Angular 来说还是相当新的。
【问题讨论】：
-
不是角度指令，但NVD3 包含许多基本和更高级的图表类型，您可以将它们包装在此类指令中。
-
查看 nvD3.js 的 angular-nvd3 指令。该指令是可重用的，并且可以通过 JSON 与完整的 nvd3 api 交互。
标签： javascript angularjs d3.js