TypeScript d3.format函數代碼示例

 return (v: number) => {
   let absv = Math.abs(v);
   if (absv < 1E-15) {
     // Sometimes zero-like values get an annoying representation
     absv = 0;
   }
   let f: (x: number) => string;
   if (absv >= 1E4) {
     f = d3.format('.' + digits + 'e');
   } else if (absv > 0 && absv < 0.01) {
     f = d3.format('.' + digits + 'e');
   } else {
     f = d3.format('.' + digits + 'g');
   }
   return f(v);
 };

            .each((d: IDatum, i: number): void => {
                var rotation = 0;
                var x = this._x(d, i, this._serie);
                var y = this._y(d, i, this._serie);
                var dx = 0;
                var dy = 0;

                if (this._labels.rotate === true) {
                    rotation = -90;
                }

                var text = this._svgLabels.append("text")
                    .text(d3.format(this._labels.format)(this._chart.series.items[this._serie].data[i]))
                    .style("text-anchor", "middle")
                    .attr({
                        "alignment-baseline": "central",
                        "class": "label",
                        "fill": "#fff",
                        "transform": "translate(" + x + ", " + y + ") rotate(" + rotation + ")"
                    });

                text
                    .attr("dy", dy)
                    .attr("dx", dx);
            });

            .each((d: IDatum, i: number): void  => {
                var rotation = 0;
                var x = this._x(d, i, this._serie);
                var y = this._y(d, i, this._serie);
                var dx = 0;
                var dy = 0;

                if (this._labels.rotate === true) {
                    rotation = -90;
                }

                if (rotation != 0) {
                    dx = -this._height(d, i, this._serie) / 2;
                    dy = this._width(d, i, this._serie) / 2;
                }
                else {
                    dx = this._width(d, i, this._serie) / 2;
                    dy = this._height(d, i, this._serie) / 2;
                }

                this._svgLabels.append("text")
                    .text(d3.format(this._labels.format)(d.y))
                    .style("text-anchor", "middle")
                    .attr({
                        "alignment-baseline": "central",
                        "class": "label",
                        "fill": "#fff",
                        "transform": "translate(" + x + ", " + y + ") rotate(" + rotation + ")",
                        "dx": dx,
                        "dy": dy
                    });
            });

    public update(data: any) {
        let propertyKey: string = this.config.get('propertyKey');
        
        // Exclude those values that do not contain a 'key'.
        let legend = null,
            entries = null,
            legendTitle = this.config.get('legendTitle'),
            propertyZ = this.config.get('propertyZ'),
            colorScale = this.config.get('colorScale'),
            height = this.config.get('height'),
            width = this.config.get('width'),
            legendCells = this.config.get('legendCells'),
            valuesFormat = this.config.get('valuesFormat');

        this.svg.select('.legend').remove();
        legend = this.svg.append('g').attr('class', 'legend');

        let min = d3min(data, (d: any) => +d[propertyZ]),
            max = d3max(data, (d: any) => +d[propertyZ]);

        if (data.length <= 1 || min == max) {
            legendCells = 2;
        } else if (data.length <= legendCells) {
            legendCells = data.length;
        }

        colorScale.domain([min, max]);

        let colorLegend: any = legendColor()
            .title(legendTitle)
            .labelDelimiter('–')
            .labelFormat(format(valuesFormat));
        if (legendCells) {
            colorLegend.cells(legendCells);
        }   
        colorLegend.scale(colorScale);
        
        legend.call(colorLegend);

        legend.attr('transform', `translate(${width + 10}, 0)`);
    }

        svg.on("mouseover", function (d: IDatum, i: number): void {
            var title = _self.chart.options.getValue("tooltip.title"),
                subtitle = _self.chart.categories.getLabel(i),
                color = _self.chart.colorPalette.color(serie),
                serieTitle = _self.chart.series.getLabel(serie),
                dataPoint,
                percent;

            if (d.y === d.y1) {
                dataPoint = d3.format(_self.getPointFormat(serie))(d.y) + _self.getSuffix(serie);
            }
            else if (d.y === undefined) {
                dataPoint =
                    d3.format(_self.getPointFormat(serie))(d.y0) + _self.getSuffix(serie) + " - " +
                    d3.format(_self.getPointFormat(serie))(d.y1) + _self.getSuffix(serie);
            }
            else {
                dataPoint =
                    d3.format(_self.getPointFormat(serie))(d.y) + _self.getSuffix(serie) + " (" +
                    d3.format(_self.getPointFormat(serie))(d.y0) + _self.getSuffix(serie) + " - " +
                    d3.format(_self.getPointFormat(serie))(d.y1) + _self.getSuffix(serie) + ")";
            }

            percent = isNaN(d.perc) ? "" : Math.round(d.perc * 100) + "%";
/*
            if (inverse) {
                color = _self.chart.colorPalette.color(i);
                subtitle = _self.chart.series.getLabel(serie);
                serieTitle = _self.chart.categories.getLabel(i);
                dataPoint = d.value;
                percent = Math.round(_self.chart.series.getMatrixItem(serie)[i].perc * 100) + "%";
            }

            if (_self.chart instanceof ScatterChart) {
                color = _self.chart.colorPalette.color(serie - 1);
            }
*/
            var svgSymbol = d3.select(document.createElementNS(d3.ns.prefix.svg, "svg"));
            var symbol = new SVGSymbol(svgSymbol, _self.chart, serie);
            symbol.color = color;
            symbol.opacity = _self.chart.options.plotOptions.area.opacity;
            symbol.draw();

            divTooltip.html("<div class='title'>" + title + "</div>" +
                "<div class='subtitle'>" + subtitle + "</div><br/>" +
                "<div class='items'>" +
                    "<div class='item'>" +
                        "<div class='cell color'>" +
                            "<svg width='24' height='11'>" +
                                svgSymbol.html() +
                            "</svg>" +
                        "</div>" +
                        "<div class='cell serie'>" + serieTitle + "</div>" +
                        "<div class='cell value'>" + dataPoint + "</div>" +
                        "<div class='cell percent'>" + percent + "</div>" +
                    "</div>" +
                "</div>"
            );

            // add animation
            divTooltip.transition()
                .delay(300)
                .duration(100)
                .style("opacity", 1);
            })

  private generateBarChart(data: any) {

    let that = this;
    let margin = {top: 20, right: 40, bottom: 60, left: 80};


    let viewerWidth = $(this.vizCanvas.nativeElement).width() - margin.left - margin.right;
    let viewerHeight = $(this.vizCanvas.nativeElement).height() - margin.top - margin.bottom;
    let formatNumber = d3.format('.2n'),
      formatBillion = function (x) {
        return formatNumber(x / 1e9) + 'B';
      },
      formatMillion = function (x) {
        return formatNumber(x / 1e6) + 'M';
      },
      formatThousand = function (x) {
        return formatNumber(x / 1e3) + 'k';
      },
      formatAsIs = function (x) {
        return x;
      };

    function formatAbbreviation(x) {
      let v = Math.abs(x);
      return (v >= .9995e9 ? formatBillion
        : v >= .9995e6 ? formatMillion
          : v >= .9995e3 ? formatThousand
            : formatAsIs)(x);
    }


    let x = d3.scaleLinear().range([0, viewerWidth]);
    let y = d3.scaleLinear().range([viewerHeight, 0]);


// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
    let svg = d3.select(this.vizCanvas.nativeElement).append('svg')
      .attr('width', viewerWidth + margin.left + margin.right)
      .attr('height', viewerHeight + margin.top + margin.bottom)
      .append('g')
      .attr('transform',
        'translate(' + margin.left + ',' + margin.top + ')');


    let xis: number[] = data.map(function (d: any) {
      return Number(d[that._x_accessor]);
    });


    let yis: number[] = data.map(function (d: any) {
      return Number(d[that._y_accessor]);
    });


    // Scale the range of the data
    x.domain(d3.extent(xis));
    y.domain(d3.extent(yis));


    // Add the scatterplot
    svg.selectAll('dot')
      .data(data)
      .enter().append('circle')
      .attr('r', 3)
      .attr('cx', function (d) {
        return x(d[that._x_accessor]);
      })
      .attr('cy', function (d) {
        return y(
          d[that._y_accessor]);

      });

    // Add the X Axis
    svg.append('g')
      .attr('transform', 'translate(0,' + viewerHeight + ')')
      .call(d3.axisBottom(x).tickFormat(formatAbbreviation))
      .selectAll('text')
      .attr('y', 0)
      .attr('x', 9)
      .attr('dy', '.35em')
      .attr('transform', 'rotate(45)')
      .style('text-anchor', 'start');

    // Add the Y Axis
    svg.append('g')
      .call(d3.axisLeft(y).tickFormat(formatAbbreviation));


    svg.append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('height', viewerHeight)
      .attr('width', viewerWidth)
      .style('stroke', 'black')
      .style('fill', 'none')
      .style('stroke-width', '1');

//.........這裏部分代碼省略.........

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

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

        var y = d3.scale.linear()
            .rangeRound([height, 0]);

        var color = d3.scale.ordinal()
            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(d3.format(".2s"));

        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 + ")");

        d3.csv("app/components/bar-charts-stacked-bar-chart/data.tsv", function(error, data) {
            if (error) throw error;

            color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

            data.forEach(function(d) {
                var y0 = 0;
                d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                d.total = d.ages[d.ages.length - 1].y1;
            });

            data.sort(function(a, b) { return b.total - a.total; });

            x.domain(data.map(function(d) { return d.State; }));
            y.domain([0, d3.max(data, function(d) { return d.total; })]);

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

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

            var state = svg.selectAll(".state")
                .data(data)
                .enter().append("g")
                .attr(attrName, "")
                .attr("class", "g")
                .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

            state.selectAll("rect")
                .attr(attrName, "")
                .data(function(d) { return d.ages; })
                .enter().append("rect")
                .attr(attrName, "")
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.y1); })
                .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                .style("fill", function(d) { return color(d.name); });

            var legend = svg.selectAll(".legend")
                .data(color.domain().slice().reverse())
                .enter().append("g")
                .attr(attrName, "")
                .attr("class", "legend")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

            legend.append("rect")
                .attr(attrName, "")
//.........這裏部分代碼省略.........

    axis: true,

    // x axis tick count
    xTicks: 6,

    // y range (opacity)
    yRange: [0, 1],

    // x domain (time)
    xDomain: [],

    // time formatter
    timeFormat: d3.time.format("%B %d %I:%M %p"),

    // value formatter
    valueFormat: d3.format('0,000'),

    // custom point width
    pointWidth: null,

    // easing function for transitions
    ease: 'linear'
};

class Margin {
    left:number;
    right:number;
    top:number;
    bottom:number;
}

 .text((d: any) => format(valuesFormat)(d[propertyZ]));