TypeScript scale.ordinal方法代码示例

	ngOnInit() {
		const data = [
			{name: "First", value: 4}, 
			{name: "Second", value: 8}, 
			{name: "Third", value: 15}, 
			{name: "Fourth", value: 16}, 
			{name: "Fifth", value: 23}, 
			{name: "Sixth", value: 42}];

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

		const x = d3.scale.ordinal()
			.domain(data.map(function(d) { return d.name; }))
			.rangeRoundBands([0, width], .1);

		const y = d3.scale.linear()
			.domain([0, d3.max(data, function(d) { return d.value; })])
			.range([height, 0]);

		const xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");

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

		const chart = d3.select(".chart")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
		.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

		chart.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", ".71em")
			.style("text-anchor", "end")
			.text("Frequency");

		chart.selectAll(".bar")
			.data(data)
			.enter().append("rect")
			.attr("class", "bar")
			.attr("x", function(d) { return x(d.name); })
			.attr("y", function(d) { return y(d.value); })
			.attr("height", function(d) { return height - y(d.value); })
			.attr("width", x.rangeBand());
	}

  init() {
    /************************************************************
     * Set Axis and Colors
     ***********************************************************/

    //this.color = d3.scale.ordinal();
    this.color = d3.scale.ordinal<string, string>().range(['#000033', '#003462', '#006699', '#0099cc', '#666666', '#999999', '#cccccc', '#db9815', '#999900', '#d1d17c', '#669933', '#666633', '#333333']);

    this.xScale = d3.scale.ordinal<string, number>()
      .range([0, 0]);

    this.yScale = d3.scale.linear()
      // Default domain
      .domain([0, 100])
      .range([0, 0]);

    this.xAxis = d3.svg.axis()
      .scale(this.xScale)
      .orient('bottom');

    this.yAxis = d3.svg.axis()
      .scale(this.yScale)
      .orient('left')
      .ticks(6);


    /************************************************************
     * Add Elements
     ***********************************************************/
    this.xAxisElement = this.chart
      .append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,0)')
      .call(this.xAxis);

    this.yAxisElement = this.chart
      .append('g')
      .attr('class', 'y axis')
      .call(this.yAxis);

    this.barElement = this.chart
      .append('g')
      .attr('class', 'bars');
  }

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

	}

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

  createChart() {
    let container = document.getElementsByClassName("chart")[0];
    let margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = container.clientWidth - margin.left - margin.right,
    height = 384 - margin.top - margin.bottom;

    let x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    let y = d3.scale.linear()
        .range([height, 0]);

    let xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

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

    let svg = d3.select("div.chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(this.optimalAllocs.map(function(d) { return d.name; }));
    y.domain([0, d3.max(this.optimalAllocs, function(d) { return d.value; })]);

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

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

    svg.selectAll(".bar")
        .data(this.optimalAllocs)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.name); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
  }

    public getYScale(axis: Axis): any {
        var min = this.series.min(name);

        var start = this.canvas.plotArea.axisSize.top;
        var end = this.canvas.plotArea.axisSize.top + this.canvas.plotArea.height;

        if (this.categories.format === "%s") {
            axis.setScaleType(ScaleType.Ordinal);
            return d3.scale.ordinal()
                .domain(this.categories.labels)
                .rangeRoundBands([start, end], this.options.plotOptions.bands.innerPadding, this.options.plotOptions.bands.outerPadding);
        }
        else {
            axis.setScaleType(ScaleType.Time);
            return d3.time.scale()
                .domain(d3.extent(this.categories.labels, (d: string): Date => {
                    return d3.time.format(this.categories.format).parse(d);
                }).reverse())
                .nice() // adds additional ticks to add some whitespace
                .range([min, this.canvas.plotArea.height]);
        }
    }

function superformula() {
    var size = 1000;

    var x = d3.scale.ordinal()
        .domain(d3.superformulaTypes)
        .rangePoints([0, 960], 1);

    var svg = d3.select("body").append("svg")
        .attr("width", 960)
        .attr("height", 500);

    var small = d3.superformula<string>()
        .type(function (d) { return d; } )
        .size(size);

    var big = d3.superformula()
        .type("square")
        .size(size * 50)
        .segments(360);

    svg.selectAll("a")
        .data(d3.superformulaTypes)
        .enter().append("a")
        .attr("xlink:title", String)
        .attr("transform", function (d, i) { return "translate(" + x(d) + ",40)"; } )
        .append("path")
        .attr("class", "small")
        .attr("d", small)
        .on("mousedown", function () { d3.select(this).style("fill", "aliceblue"); } )
        .on("mouseup", function () { d3.select(this).style("fill", null); } )
        .on("click", function (d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); } );

    svg.append("path")
        .attr("class", "big")
        .attr("transform", "translate(450,250)")
        .attr("d", big);
}

	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() {
    let data:Array<ClientChartData> = this.data;
    let el:any = this.elementRef.nativeElement;
    let parentWidth = el.parentElement.offsetWidth;
    let parentHeight = 250;
    let margin = { top: 20, right: 40, bottom: 50, left: 40 };
    let width = parentWidth - margin.left - margin.right;
    let height = parentHeight - margin.top - margin.bottom;

    let x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1)
        .domain(data.map((d: ClientChartData) => d.client));

    let y = d3.scale.linear()
        .range([height, 0])
        .domain([0, d3.max(data, (d: ClientChartData) => d.hits )]);

    let xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    let yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    let svg = d3.select(el).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(45)")
        .style("text-anchor", "start");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Hits");

    svg.selectAll('.axis line, .axis path')
         .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '2px'});

    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", (d: ClientChartData) => x(d.client))
        .attr("width", x.rangeBand())
        .attr("y", (d: ClientChartData) => y(d.hits))
        .attr("height", (d: ClientChartData) => height - y(d.hits));

    svg.selectAll('.bar')
          .style({'fill': '#337ab7'});
  }

    { owner: 4, color: 'yellow', start: new Date('1-15-2014 12:00'), end: new Date('1-16-2014') },
    { owner: 5, color: 'orange', start: new Date('2-5-2014'), end: new Date('2-12-2014') }
];

var later_data = [
    { owner: 2, color: 'red', start: new Date('2-10-2014'), end: new Date('2-11-2014') },
    { owner: 3, color: 'yellow', start: new Date('2-10-2014'), end: new Date('2-13-2014') },
    { owner: 4, color: 'blue', start: new Date('2-11-2014'), end: new Date('2-15-2014') }
];

var width = 900,
    height = 500,
    panX = 0;

var xScale = d3.time.scale().domain([new Date('1-1-2014'), new Date('1-31-2014')]).range([0, width]),
    yScale = d3.scale.ordinal().domain(team_member_ids).rangeRoundBands([0, height], 0, 0),
    xAxis = d3.svg.axis().scale(xScale).tickSize(-480).orient('top');

var zoom = d3.behavior.zoom().scaleExtent([.025, 1]).x(xScale)
    .on('zoom', function () {
        render();
    })
    .on('zoomend', function () {
        if (xScale.domain()[1] > d3.time.day.offset(d3.max(data.map(function (d) { return d.end; })), 4)) {
            data = data.concat(later_data);
            render();
        }
    });

var drag = d3.behavior.drag()
    .on('dragstart', function () {