当前位置: 首页>>代码示例>>TypeScript>>正文

TypeScript scale.category10方法代码示例

本文整理汇总了TypeScript中d3.scale.category10方法的典型用法代码示例。如果您正苦于以下问题：TypeScript scale.category10方法的具体用法？TypeScript scale.category10怎么用？TypeScript scale.category10使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.scale的用法示例。


在下文中一共展示了scale.category10方法的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的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);
	}
开发者ID:TiagoJSM，项目名称:Angular2_D3，代码行数:79，代码来源:stacked-chart.component.ts

示例2: ngOnInit

    ngOnInit(){     
       
        var el = this.elementRef.nativeElement;
        var attrName = el.children && el.children[0] && el.children[0].attributes && el.children[0].attributes[0] && el.children[0].attributes[0].name;
       
        var componentContainer = d3.select(this.elementRef.nativeElement);
        var d3Container = componentContainer.select("#display");
        
        var n = 20, // number of samples
            m = 4; // number of series

        var data = d3.range(m).map(function() { return d3.range(n).map(Math.random); });

        var margin = {top: 20, right: 30, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var y = d3.scale.linear()
            .domain([0, 1])
            .range([height, 0]);

        var x0 = d3.scale.ordinal()
            .domain(d3.range(n))
            .rangeBands([0, width], .2);

        var x1 = d3.scale.ordinal()
            .domain(d3.range(m))
            .rangeBands([0, x0.rangeBand()]);

        var z = d3.scale.category10();

        var xAxis = d3.svg.axis()
            .scale(x0)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        var svg = d3Container.append("svg")
            .attr(attrName, "")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("svg:g")
            .attr(attrName, "")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "y axis")
            .call(yAxis);

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr(attrName, "")
            .selectAll("g")
            .data(data)
        .enter().append("g")
            .attr(attrName, "")
            .style("fill", function(d, i) { return z(i); })
            .attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; })
        .selectAll("rect")
            .data(function(d) { return d; })
        .enter().append("rect")
            .attr(attrName, "")
            .attr("width", x1.rangeBand())
            .attr("height", y)
            .attr("x", function(d, i) { return x0(i); })
            .attr("y", function(d) { return height - y(d); });
        
    }
开发者ID:Anhmike，项目名称:angular2-d3-sample，代码行数:76，代码来源:component.ts

示例3: 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);
	}
开发者ID:TiagoJSM，项目名称:Angular2_D3，代码行数:85，代码来源:stacked-area-chart.component.ts


注：本文中的d3.scale.category10方法示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。