本文整理汇总了TypeScript中d3.layout.stack方法的典型用法代码示例。如果您正苦于以下问题：TypeScript layout.stack方法的具体用法？TypeScript layout.stack怎么用？TypeScript layout.stack使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.layout的用法示例。
在下文中一共展示了layout.stack方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: ngOnInit
ngOnInit() {
const data = [
{source: "PIMCO" , returnSeeking: 0.91, capitalPreserved: 0.09},
{source: "Market Average" , returnSeeking: 0.93, capitalPreserved: 0.07},
{source: "Sample Client" , returnSeeking: 0.91, capitalPreserved: 0.09},
];
const percentages = ["returnSeeking", "capitalPreserved"];
const svgElem = d3.select(".svg");
const margin = {top: 20, right: 50, bottom: 30, left: 20},
width = +svgElem.attr("width") - margin.left - margin.right,
height = +svgElem.attr("height") - margin.top - margin.bottom;
const x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
const y = d3.scale.linear()
.rangeRound([height, 0]);
const z = d3.scale.category10();
const xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
const yAxis = d3.svg.axis()
.scale(y)
.orient("right");
const svg = svgElem
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const layers = d3.layout.stack<{x: string, y: number, y0: number}>()(percentages.map(c => {
return data.map(d => {
return {x: d.source, y: d[c]};
}) as any;
}));
x.domain(layers[0].map(d => d.x) as any);
y.domain([0, d3.max(layers[layers.length - 1], d => d.y0 + d.y)]).nice();
const barHeight = d => y(d.y0) - y(d.y + d.y0);
const layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", (d, i) => z(i.toString()));
layer.selectAll("rect")
.data<{x: string, y: number, y0: number}>(d => d)
.enter().append("rect")
.attr("x", d => x(d.x))
.attr("y", d => y(d.y + d.y0))
.attr("height", d => barHeight(d))
.attr("width", x.rangeBand() - 1);
layer.selectAll("text")
.data<{x: string, y: number, y0: number}>(d => d)
.enter().append("text")
.attr("class", "bar-text")
.attr("fill", "white")
.attr("x", d => x.rangeBand()/2 + x(d.x))
.attr("y", d => y(d.y + d.y0) + barHeight(d)/2)
.attr("width", x.rangeBand() - 1)
.text(d => d.y );
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
}示例2: ngOnInit
ngOnInit() {
const data = [
{key: "Group1" , value: 37, date: new Date(2012, 4, 23)},
{key: "Group2" , value: 12, date: new Date(2012, 4, 23)},
{key: "Group3" , value: 46, date: new Date(2012, 4, 23)},
{key: "Group1" , value: 32, date: new Date(2012, 4, 24)},
{key: "Group2" , value: 19, date: new Date(2012, 4, 24)},
{key: "Group3" , value: 42, date: new Date(2012, 4, 24)},
{key: "Group1" , value: 45, date: new Date(2012, 4, 25)},
{key: "Group2" , value: 16, date: new Date(2012, 4, 25)},
{key: "Group3" , value: 44, date: new Date(2012, 4, 25)},
{key: "Group1" , value: 24, date: new Date(2012, 4, 26)},
{key: "Group2" , value: 52, date: new Date(2012, 4, 26)},
{key: "Group3" , value: 64, date: new Date(2012, 4, 26)},
];
const svgElem = d3.select(".svg");
const margin = {top: 20, right: 30, bottom: 30, left: 40},
width = +svgElem.attr("width") - margin.left - margin.right,
height = +svgElem.attr("height") - margin.top - margin.bottom;
const x = d3.time.scale()
.range([0, width]);
const y = d3.scale.linear()
.range([height, 0]);
const z = d3.scale.category10();
const xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.days);
const yAxis = d3.svg.axis()
.scale(y)
.orient("left");
const stack = d3.layout.stack<{key: string , value: number, date: Date, values: any}>()
.offset("zero")
.values(d => d.values as any)
.x(d => d.date as any)
.y(d => d.value as any);
const nest = d3.nest<{key: string , value: number, date: Date}>()
.key(d =>
d.key);
const area = d3.svg.area<{key: string , value: number, date: Date, y: number, y0: number}>()
.interpolate("cardinal")
.x(d => x(d.date))
.y0(d => y(d.y0))
.y1(d => y(d.y0 + d.y));
const svg = svgElem
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const layers = stack(nest.entries(data as any) as any);
x.domain(d3.extent(data, d => d.date as any));
y.domain([0, d3.max(data, d => (d as any).y0 + (d as any).y)]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", d => area(d.values as any))
.style("fill", (d, i) => z(i.toString()));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}