本文整理汇总了TypeScript中d3.svg.arc方法的典型用法代码示例。如果您正苦于以下问题：TypeScript svg.arc方法的具体用法？TypeScript svg.arc怎么用？TypeScript svg.arc使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.svg的用法示例。
在下文中一共展示了svg.arc方法的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的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: createArcPath
export function createArcPath(innerR: number, outerR: number, startAngle: number, endAngle: number) {
return d3.svg.arc()
.innerRadius(innerR)
.outerRadius(outerR)
.startAngle(startAngle)
.endAngle(endAngle)(null);
}示例3: render
render() {
if (!this.data && this.data.length === 0) {
return;
}
/************************************************************
* Set Data
***********************************************************/
this.radius = d3.min([this.chartWidth, this.chartHeight]) / 2;
this.arc = d3.svg.arc()
.outerRadius(this.radius - 10)
.innerRadius(0);
this.color
.range(pick(this.data, 'color'))
.domain(pick(this.data, 'label'));
let arcs = this.pieContainer
.selectAll('.arc')
.data(this.pie(this.data));
/************************************************************
* D3 Enters
***********************************************************/
this.pieContainer
.attr('transform', `translate(${this.chartWidth / 2}, ${this.chartHeight / 2})`);
let arcEnter = arcs.enter()
.append('g')
.attr('class', 'arc');
arcEnter.append('path')
.attr('d', this.arc)
.style('fill', d => this.color(d.data.label));
/*arcEnter.append('text')
.attr('transform', d => 'translate(' + this.arc.centroid(d) + ')')
.attr('dy', '.35em')
.style('text-anchor', 'middle')
.text(d => d.data.label);*/
/************************************************************
* D3 Transitions
***********************************************************/
//arcs.transition().attr('d', d => this.pie(d.data));
/************************************************************
* D3 Exits
***********************************************************/
arcs.exit().transition().remove();
}示例4: addDoor
addDoor(cx: number, cy: number, size: number, startAngle: number, endAngle: number) {
var door = this._group.append('g')
.classed('door', true)
.attr('transform', `translate(${this._scale(cx)},${this._scale(cy)})`);
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(size)
.startAngle(startAngle)
.endAngle(endAngle);
door.append('path')
.attr('d', arc);
return door;
}