TypeScript d3.max函数代码示例

    public max(name?: string): number {
        var matrix: IDatum[][] = [];

        if (name != undefined && name != "" && this._chart.stackType === StackType.None) {
            matrix = this.getMatricesByAxisName(name);
        }

        if (matrix.length === 0) {
            matrix = this._matrix;
        }

        if (this._chart.stackType != StackType.None && this.items.length > 1) { // can only be stacked if you have more than 1 series defined
            return d3.max(matrix, function (array: IDatum[]): number {
                return d3.max(array, function (d: IDatum): number {
                    return d.sum;
                });
            });
        }
        else {
            return d3.max(matrix, function (array: IDatum[]): number {
                return d3.max(array, function (d: IDatum): number {
                    if (d.y != undefined && d.y > d.y1) {
                        return d.y;
                    }
                    return d.y1;
                });
            });
        }
    }

    private draw(): void {
        var xMin = d3.min(this._points, p => p[0]);
        var xMax = d3.max(this._points, p => p[0]);
        var yMin = d3.min(this._points, p => p[1]);
        var yMax = d3.max(this._points, p => p[1]);

        var lineGenerator = d3.svg.line()
            .x(d => this._scale(d[0]))
            .y(d => this._scale(d[1]));
        var path = this._group
            .append('path')
            .attr('d', lineGenerator(this._points))
            .attr({
                fill: this._color
            });
        this._group
            .append('text')
            .attr({
                'transform': `translate(${this._scale((xMax + xMin) / 2)},${this._scale((yMax + yMin) / 2)})`
            })
            .style({
                'text-transform': 'uppercase',
                'text-anchor': 'middle'
            })
            .text(this._name);
    }

    public update(data: any[]) {
        let propertyKey = this.config.get('propertyKey'),
            propertyX = this.config.get('propertyX'),
            propertyY = this.config.get('propertyY'),
            ticks = this.config.get('bins'),
            x = this.x.xAxis.scale(),
            y = this.y.yAxis.scale(),
            height = this.config.get('height'),
            width = this.config.get('width');

        let histogramData = data.map((d) => d[propertyX]);

        let bins = histogram()
            .domain(x.domain())
            .thresholds(x.ticks(ticks))
            (histogramData);

        this.bins = bins;

        this.y.updateDomainByMinMax(0, max(bins, (d) => d.length));
        this.y.transition();

        this.x.updateDomainByMinMax(
            min(data, (d) => d[propertyX]),
            max(data, (d) => d[propertyX] + (bins[0].x1 - bins[0].x0))
        );

        this.x.transition();

        // JOIN bars
        let bars = this.svg.selectAll('.proteic-bars').selectAll('.' + Globals.SELECTOR_ELEMENT)
            .data(bins);

        // Update bars
        this.elementUpdate = bars;

        // Enter bars
        this.elementEnter = bars
            .enter().append('rect')
            .attr('class', Globals.SELECTOR_ELEMENT)
            .attr('data-proteic-element', 'barHistogram')
            .attr('x', (d) => x(d.x0))
            .attr('y', (d) => y(d.length))
            .attr('width', x(bins[0].x1) - x(bins[0].x0) - 1)
            .attr('height', (d) => height - y(d.length));

        this.elementExit = bars.exit().remove();

        bars
            .on('mousedown.user', this.config.get('onDown'))
            .on('mouseup.user', this.config.get('onUp'))
            .on('mouseleave.user', this.config.get('onLeave'))
            .on('mouseover.user', this.config.get('onHover'))
            .on('click.user', this.config.get('onClick'));
    }

  // Compute a minimum bounding box for a supplied collection of boxes.
  static boundingBox(...boxes: Box[]): Box {
    if (_.isEmpty(boxes)) {
      return null;
    }

    const left = d3.min(boxes, b => b.left());
    const top = d3.min(boxes, b => b.top());
    const right = d3.max(boxes, b => b.right());
    const bottom = d3.max(boxes, b => b.bottom());
    return new Box(left, top, right - left, bottom - top);
  }

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

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

        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("Frequency");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr(attrName, "")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.letter); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.frequency); })
            .attr("height", function(d) { return height - y(d.frequency); });
        });

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

 return d3.max(matrix, function (array: IDatum[]): number {
     return d3.max(array, function (d: IDatum): number {
         if (d.y != undefined && d.y > d.y1) {
             return d.y;
         }
         return d.y1;
     });
 });

  render() {

    if (!this.data && this.data.length === 0) {
      return;
    }

    this.xScale
      .domain(this.data.map(d => d.label))
      .rangeRoundBands([0, this.chartWidth], .1);

    this.yScale
      .domain([0, d3.max(this.data, d => d.value)])
      .range([this.chartHeight, 0]);

    this.xAxisElement.attr('transform', `translate(0, ${this.chartHeight})`);
    //this.yGridElement.call(this.yGrid.tickSize(-this.chartWidth, 0, 0));

    this.xAxis.scale(this.xScale);
    this.yAxis.scale(this.yScale);

    this.xAxisElement.transition().call(this.xAxis);
    this.yAxisElement.transition().call(this.yAxis);

    let bars = this.barElement
      .selectAll('.bar')
      .data(this.data);

    /************************************************************
     * D3 Enters
     ***********************************************************/

    bars.enter()
      .append('rect')
      .attr('class', 'bar')
      .style('fill', d => this.color(d.label))
      .attr('x', d => this.xScale(d.label))
      .attr('width', this.xScale.rangeBand())
      .attr('y', d => this.yScale(d.value))
      .attr('height', d => this.chartHeight - this.yScale(d.value));

    /************************************************************
     * D3 Transitions
     ***********************************************************/

    bars.transition()
      .attr('x', d => this.xScale(d.label))
      .attr('width', this.xScale.rangeBand())
      .attr('y', d => this.yScale(d.value))
      .attr('height', d => this.chartHeight - this.yScale(d.value));

    //arcs.transition().attr('d', d => this.pie(d.data));

    /************************************************************
     * D3 Exits
     ***********************************************************/
    bars.exit().transition().remove();
  }

    it("line", () => {
      const text = "helloworld";
      const dimensions = measurer.measure(text);
      const characterDimensions: IDimensions[] = text.split("").map((c) => measurer.measure(c));
      const dimensionsByCharacter = {
        height: d3.max(characterDimensions.map((c) => c.height)),
        width: d3.sum(characterDimensions.map((c) => c.width)),
      };

      assert.deepEqual(dimensions, dimensionsByCharacter, "text has been measured by characters.");
    });

    public getXScale(axis: Axis): d3.scale.Linear<number, number> {
        var min = d3.min(this.series.items[0].data);
        var max = d3.max(this.series.items[0].data);
        var start = this.canvas.plotArea.axisSize.left;
        var end =  this.canvas.plotArea.axisSize.left + this.canvas.plotArea.width;

        axis.setScaleType(ScaleType.Linear);
        return d3.scale.linear()
            .domain([min < 0 ? min : 0, max])
            .nice() // adds additional ticks to add some whitespace
            .range([start, end]);
    }