TypeScript d3.layout类代码示例

	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; 
			});

	}

  runSim(graph: IPanamaPapersGraph) {
    let width = this.width || (window.innerWidth - 50), height = this.height || (window.innerHeight - 50);

    // force layout setup
    let force = d3.layout.force()
    .charge(-500)
    .linkDistance(500)
    .linkStrength(0.1)
    .size([width, height])

    // setup svg div on this.eltRef.nativeElement.firstChild
    let svg = d3.select(this.eltRef.nativeElement.firstChild).append('svg')
    .attr('width', width).attr('height', height)
    .attr('pointer-events', 'all');

    // Let's populate the nodes
    force.nodes(graph.nodes)
      .links(graph.links)
      .start();

    // render relationships as lines
    let link = svg.selectAll('.link')
      .data(graph.links)
        .enter()
        .append('line')
        .attr('class', (d) => 'link ' + d.type);

    // render nodes as circles, css-class from label
    let node = svg.selectAll('.node')
      .data(graph.nodes).enter()
      .append('g')
      .attr('class', (d) => 'node ' + d.label )
      .call(force.drag);

    node.append('circle')
      .attr('r', 10);

    node.append('text')
    .attr('x', 12)
    .attr('dy', '.35em')
    .text((d) => d.title );

    // force feed algo ticks for coordinate computation
    force.on('tick', () => {
      link.attr('x1', (d) => d.source.x)
      .attr('y1', (d) => d.source.y)
      .attr('x2', (d) => d.target.x)
      .attr('y2', (d) => d.target.y);

      node.attr('transform', (d: any) => 'translate(' + d.x + ',' + d.y + ')');
    });
  }

  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');
  }

    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 margin = {top: 30, right: 120, bottom: 0, left: 120},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var x = d3.scale.linear()
            .range([0, width]);

        var barHeight = 20;

        var color = d3.scale.ordinal()
            .range(["steelblue", "#ccc"]);

        var duration = 750,
            delay = 25;
            
        var partition = d3.layout.partition()
            .value(function(d) { return d.size; });

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("top");

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

        svg.append("rect")
            .attr(attrName, "")
            .attr("class", "background")
            .attr("width", width)
            .attr("height", height)
            .on("click", up);

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "x axis");

        svg.append("g")
            .attr(attrName, "")
            .attr("class", "y axis")
        .append("line")
            .attr(attrName, "")
            .attr("y1", "100%");

        d3.json("app/components/bar-charts-hierarchical-bar-chart/readme.json", function(error, root) {
            if (error) throw error;

            partition.nodes(root);  
            x.domain([0, root.value]).nice();
            down(root, 0);
        });
        
        

        function down(d, i) {
            if (!d.children || window.__transition__) return;
            var end = duration + d.children.length * delay;

            // Mark any currently-displayed bars as exiting.
            var exit = svg.selectAll(".enter")
                .attr("class", "exit");

            // Entering nodes immediately obscure the clicked-on bar, so hide it.
            exit.selectAll("rect").filter(function(p) { return p === d; })
                .style("fill-opacity", 1e-6);

            // Enter the new bars for the clicked-on data.
            // Per above, entering bars are immediately visible.
            var enter = bar(d)
                .attr("transform", stack(i))
                .style("opacity", 1);

            // Have the text fade-in, even though the bars are visible.
            // Color the bars as parents; they will fade to children if appropriate.
            enter.select("text").style("fill-opacity", 1e-6);
            enter.select("rect").style("fill", color(true));

            // Update the x-scale domain.
            x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();

            // Update the x-axis.
            svg.selectAll(".x.axis").transition()
                .duration(duration)
                .call(xAxis);

            // Transition entering bars to their new position.
            var enterTransition = enter.transition()
                .duration(duration)
//.........这里部分代码省略.........

	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);
	}

	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);
	}