本文整理汇总了TypeScript中d3.layout.pie方法的典型用法代码示例。如果您正苦于以下问题:TypeScript layout.pie方法的具体用法?TypeScript layout.pie怎么用?TypeScript layout.pie使用的例子?那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.layout
的用法示例。
在下文中一共展示了layout.pie方法的2个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: ngOnInit
ngOnInit() {
const data = [
{age: "<5" , population: 2704659},
{age: "5-13" , population: 4499890},
{age: "14-17" , population: 2159981},
{age: "18-24" , population: 3853788},
{age: "25-44" , population: 14106543},
{age: "45-64" , population: 8819342},
{age: "âĽ65" , population: 612463}
];
const pieSvg = d3.select(".pie");
const width = +pieSvg.attr("width"),
height = +pieSvg.attr("height"),
radius = Math.min(width, height) / 2;
const color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
const arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
const labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
const pie = d3.layout.pie<{age: string, population: number}>()
.sort(null)
.value(function(d) { return d.population; });
const svg = d3.select(".pie")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
const g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc as any)
.style("fill", function(d) { return color(d.data.age); } as any);
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d as any) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data.age;
});
}
示例2: init
init() {
/************************************************************
* Set Axis and Colors
***********************************************************/
this.color = d3.scale.ordinal();
this.pie = d3.layout.pie()
.sort(null)
.value(d => d.value);
this.pieContainer = this.chart
.append('g');
}