public render(data: ICoordinate[]): d3.Selection<any> {
        const x = d3.scale.linear().range([0, this.width]);
        const y = d3.scale.linear().range([this.height, 0]);
        const xAxis = d3.svg.axis().scale(x).orient('bottom');
        const yAxis = d3.svg.axis().scale(y).orient('left');
        const svg = this.element.append('svg')
            .attr('width', this.chartWidth)
            .attr('height', this.chartHeight)
            .append('g')
            .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        x.domain(d3.extent(data, a => a.x));
        y.domain(d3.extent(data, a => a.y));

        const line = d3.svg.line<ICoordinate>()
            .x(a => x(a.x))
            .y(a => y(a.y));

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

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

        svg.append('path')
            .datum(data)
            .attr('class', 'line')
            .attr('d', line);

        return svg;
    }

    }, function(error, data: [{ letter: string, frequency: number}]) {
      if (error) {
        throw error;
      }

      x.domain(data.map((d) => d.letter));
      y.domain(d3.extent(data, (d) => d.frequency));

      g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(x));

      g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y).ticks(10, '%').tickPadding(23))
        .append('text')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Frequency');

      g.selectAll('.bar')
        .data(data)
        .enter().append('rect')
          .attr('class', 'bar')
          .attr('x', (d) => x(d.letter))
          .attr('y', (d) => y(d.frequency))
          .attr('width', x.bandwidth())
          .attr('height', (d) => height - y(d.frequency));
    });

    /**
     * Render given data as bubbles.
     */
    public render(data: T[]): d3.Selection<any> {
        const svg = this.element.append('svg')
                    .attr('height', this.chartHeight)
                    .attr('width', this.chartWidth);

        const plot = svg.append('g')
            .attr('transform', 'translate(400 300)');

        this.render_spiral_axis(plot);

        if (this.x_map) {
            const extent = d3.extent(data, (datum: T, _) => this.x_map(datum));
            const turn_range_sec = this.period_fraction * (extent[1] - extent[0]);

            // do the section from east to the end of the spiral
            const s1_range = BubbleSpiral.MODULO(1 / this.period_fraction, 1) - 1 / 4;
            const s1_fractions = d3.range(s1_range * 8 + 1).map(i => i / 8);
            const s1_start_sec = extent[1] - s1_range * turn_range_sec;
            const s1_labels = s1_fractions.map(i => (s1_start_sec + i * turn_range_sec)).map(this.label_map);

            // do the section from one past the start of the last winding to east
            const s2_range_start = s1_range + 1 / 8;
            const s2_range = 1 - s2_range_start;
            const s2_fractions = d3.range(s2_range * 8).map(i => i / 8);
            const s2_start_sec = extent[1] - 7 / 8 * turn_range_sec;
            const s2_labels = s2_fractions.map(i => (s2_start_sec + i * turn_range_sec)).map(this.label_map);

            const marks = s1_fractions.concat(s2_fractions.map(x => x + s2_range_start));
            const labels = s1_labels.concat(s2_labels);

            this.add_axis(plot, marks, labels);
        }

        const bubble_groups = plot.append('g').selectAll('g.bubble')
            .data(data)
            .enter().append('g')
            .attr('class', 'bubble');

        bubble_groups.append('circle')
            .attr('cx', (d) => this.get_polar(this.radial_map(d)).x)
            .attr('cy', (d) => this.get_polar(this.radial_map(d)).y)
            .attr('r', (d) => this.bubble_scale_map(d))
            .style('fill', this.color_map ? (d) => this.color_map(d) : () => 'red')
            .style('fill-opacity', 0.1)
            .style('stroke', 'black')
            .style('stroke-width', 0.05);

        return plot;
    }

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

  plot() {
    var data: Array<ExpectedData> = [
      { key: 39, value: 60, date: "2014/01/01" },
      { key: 40, value: 58, date: "2014/01/02" },
      { key: 38, value: 59, date: "2014/01/03" },
      { key: 41, value: 56, date: "2014/01/04" },
      { key: 43, value: 57, date: "2014/01/05" },
      { key: 40, value: 55, date: "2014/01/06" },
      { key: 42, value: 56, date: "2014/01/07" },
      { key: 41, value: 52, date: "2014/01/08" },
      { key: 39, value: 54, date: "2014/01/09" },
      { key: 36, value: 57, date: "2014/01/10" },
      { key: 37, value: 56, date: "2014/01/11" },
      { key: 41, value: 59, date: "2014/01/12" },
      { key: 43, value: 56, date: "2014/01/13" },
      { key: 42, value: 52, date: "2014/01/14" },
      { key: 43, value: 48, date: "2014/01/15" },
      { key: 40, value: 47, date: "2014/01/16" },
      { key: 42, value: 48, date: "2014/01/17" },
      { key: 44, value: 45, date: "2014/01/18" },
      { key: 46, value: 43, date: "2014/01/19" },
      { key: 48, value: 41, date: "2014/01/20" },
      { key: 53, value: 36, date: "2014/01/21" },
      { key: 52, value: 34, date: "2014/01/22" },
      { key: 53, value: 32, date: "2014/01/23" },
      { key: 55, value: 34, date: "2014/01/24" },
      { key: 56, value: 32, date: "2014/01/25" },
      { key: 55, value: 30, date: "2014/01/26" },
      { key: 57, value: 28, date: "2014/01/27" },
      { key: 56, value: 26, date: "2014/01/28" },
      { key: 59, value: 24, date: "2014/01/29" },
      { key: 58, value: 22, date: "2014/01/30" },
      { key: 60, value: 20, date: "2014/01/31" }
    ];
    var w = window.screen.width;
    var h = 450;
    var margin = {
      top: 10,
      bottom: 100,
      left: 50,
      right: 50
    };
    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;

    this.svg = d3.select(".container-fluid").append("svg")
      .attr("id", "chart")
      .attr("width", w)
      .attr("height", h)
      .style("background", "#F5F5DC")
      .style('text-align', "center");
    this.chart = this.svg.append("g")
      .classed("display", true)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .style("background", "green");
    var dateParser = d3.timeParse("%Y/%m/%d");

    // Define the div for the tooltip
    var div = d3.select("body").append("div")
      .attr("class", "tooltip").style("margin","0px").style("padding","2px")
      .style("position","absolute").style("height","30px").style("border-radius","8px")
      .style("background", "lightsteelblue").style("font","12px sans-serif").style("width","60px")
      .style("opacity", 0);


    var x = d3.scaleTime()
      .domain(d3.extent(data, function (d) {
        var date = dateParser(d.date);

        return date;
      }))
      .range([0, width]);


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


    var y1 = d3.scaleLinear()
      .domain([0, d3.max(data, function (d) {
        return d.key;
      })])
      .range([height, 0]);

    var area = d3.area<ExpectedData>()
      .x(function (d) {

        return x(dateParser(d.date));
      })
      .y0(height)
      .y1(function (d) {
        return y(d['value']);
      });

    //line1 for value in data
    var line = d3.line<ExpectedData>()
      .x(function (d) {
//.........这里部分代码省略.........

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

//.........这里部分代码省略.........

  private drawTemperatureChart(rootElt: AnySvgSelection, data: DataPoint[]) {
    let yExtent = d3.extent(data, d => d.temperature);
    // TODO(mrjones): The types don't seem to work for using xExtent here
    // See: extent in
    // https://github.com/tomwanzek/d3-v4-definitelytyped/blob/24f5308f8e3da8f2a996454d47e60b31157ebb66/src/d3-array/index.d.ts
//    let xExtent = d3.extent(data, d => new Date(d.unix_seconds * 1000));
    this.xScale.domain([
      d3.min(data, d => new Date(d.unix_seconds * 1000)),
      d3.max(data, d => new Date(d.unix_seconds * 1000)),
    ]);
    this.yScale.domain(yExtent);

    let tempsLineG = rootElt.append('g')
      .attr('class', 'tempsLineG');

    let startDate = d3.min(data, d => new Date(d.unix_seconds * 1000));
    let endDate = d3.max(data, d => new Date(d.unix_seconds * 1000));

    this.drawWeekendBackgrounds(tempsLineG, startDate, endDate);

    this.drawTempMidnights(
      tempsLineG,
      utils.midnightsBetween(startDate, endDate));

    // TODO(mrjones): Morally, should this share an x-scaler with the temp chart?
    this.precipBar.render(data);
    this.cloudsBar.render(data);
    /*
      var xAxisTranslate = {
      x: 0,
      y: chart.bounds.height - chart.bounds.axisSize - chart.bounds.margin
      };
      tempsLineG.append('g')
      .attr('class', 'axis xaxis')
      .attr('transform', 'translate(' + xAxisTranslate.x + ',' + xAxisTranslate.y + ')')
      .call(chart.xAxis);
    */

    let yAxisTranslate = {
      x: this.bounds.axisSize + this.bounds.margin,
      y: 0,
    };
    tempsLineG.append('g')
      .attr('class', 'axis yaxis')
      .attr('transform', 'translate(' + yAxisTranslate.x + ',' + yAxisTranslate.y + ')')
      .call(this.yAxis);

    tempsLineG.selectAll('.axis')
      .attr('font-size', '5');

    tempsLineG.append('path')
      .datum(data)
      .attr('class', 'dataline')
      .attr('d', this.lineSpec);

    let minMaxSpecs = [
      { label: "max", values: utils.selectMaxes(data, d => d.temperature) },
      { label: "min", values: utils.selectMins(data, d => d.temperature) },
    ];

    minMaxSpecs.forEach(spec => {
      let maxMarkerG = tempsLineG.selectAll('.' + spec.label + 'Marker')
        .data(spec.values)
        .enter()
        .append('g')
        .attr('class', spec.label + 'Marker');
      maxMarkerG.append('circle')
        .attr('cx', d => this.xScale(d.time))
        .attr('cy', d => this.yScale(d.value))
        .attr('r', 1);
      maxMarkerG.append('text')
        .attr('x', d => this.xScale(d.time) - 7)
        .attr('y', d => this.yScale(d.value) + 1)
        .text(d => d.value)
        .style('font-family', 'sans-serif')
        .style('font-size', 4);
    });
  };

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

    public update(data: any[]): void {
        let propertyKey = this.config.get('propertyKey');
        let propertyStart = this.config.get('propertyStart');
        let propertyEnd = this.config.get('propertyEnd');
        let propertyZ = this.config.get('propertyZ');
        
        data = data.filter((d) => propertyEnd in d || propertyStart in d);

        let colorScale = this.config.get('colorScale'),
            colorScaleType = this.config.get('colorScaleType'),
            height = this.config.get('height'),
            onDown = this.config.get('onDown'),
            onUp = this.config.get('onUp'),
            onLeave = this.config.get('onLeave'),
            onHover = this.config.get('onHover'),
            onClick = this.config.get('onClick'),
            displayValues = this.config.get('displayValues'),
            valuesFormat = this.config.get('valuesFormat'),
            keys = map(data, (d) => d[propertyKey]).keys(),
            layer = this.svg.selectAll('.serie').data(data),
            layerEnter = null,
            layerMerge = null,
            box = null,
            boxEnter = null,
            boxExit = null,
            boxMerge = null,
            extLanes = null,
            yLanes: any = null,
            yLanesBand = scaleBand().range([0, keys.length + 1]).domain(keys),
            x = this.xyAxes.x.xAxis.scale(),
            y = this.xyAxes.y.yAxis.scale();

        if (colorScaleType === 'sequential') {
            let min = (d3Min(data, (d: any) => +d[propertyZ])),
                max = (d3Max(data, (d: any) => +d[propertyZ]));
            colorScale.domain([min, max]);
        }

        data = simple2nested(data, propertyKey);
        
        extLanes = extent(data, (d, i) => i);
        yLanes = scaleLinear().domain([extLanes[0], extLanes[1] + 1]).range([0, height]);

        layer = this.svg.selectAll('.serie').data(data);
        
        // NOTE: d.key instead of d[propertyKey] because data is d3.Nest
        layerEnter = layer.enter()
            .append('g')
            .attr(Globals.COMPONENT_DATA_KEY_ATTRIBUTE, (d: any) => d.key);

        layerMerge = layer.merge(layerEnter)
            .attr('class', 'serie');
            
            
        box = layerMerge.selectAll('.box')
            .data((d: any) => d.values);
            
        boxExit = layer.exit().remove();

        boxEnter = box.enter()
            .append('g')
            .attr('class', 'box');

        boxEnter.append('rect')
            .attr('data-proteic-element', 'timeBox')
            .attr('width', (d: any) => x(d[propertyEnd]) - x(d[propertyStart]))
            .attr('x', (d: any) => x(d[propertyStart]))
            .attr('y', (d: any) => y(d[propertyKey]))
            .attr('height', () => 0.8 * yLanes(1))
            .style('fill', (d: any) => colorScaleType === 'sequential'
                ? colorScale(d[propertyZ])
                : colorScale(d[propertyKey])
            );

        if (displayValues) {
            boxEnter.append('text')
                .attr('x', (d: any) => x(d[propertyStart]) + (x(d[propertyEnd]) - x(d[propertyStart])) / 2)
                .attr('y', (d: any) => y(d[propertyKey]) + 0.8 * yLanes(1) / 2)
                .attr('dy', '3')
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
                .text((d: any) => format(valuesFormat)(d[propertyZ]));
        }

        boxMerge = box.merge(boxEnter);

        boxMerge.select('rect')
            .attr('width', (d: any) => x(d[propertyEnd]) - x(d[propertyStart]))
            .attr('x', (d: any) => x(d[propertyStart]))
            .attr('y', (d: any) => y(d[propertyKey]))
            .attr('height', () => 0.8 * yLanes(1))
            .style('fill', (d: any) => colorScaleType === 'sequential'
                ? colorScale(d[propertyZ])
                : colorScale(d[propertyKey])
            );

        if (displayValues) {
            boxMerge.select('text')
                .attr('x', (d: any) => x(d[propertyStart]) + (x(d[propertyEnd]) - x(d[propertyStart])) / 2)
                .attr('y', (d: any) => y(d[propertyKey]) + 0.8 * yLanes(1) / 2)
//.........这里部分代码省略.........