addHistogram(data) {
    let xBucket = this.scope.ctrl.data.buckets[data.x];
    let yBucketSize = this.scope.ctrl.data.yBucketSize;
    let {min, max, ticks} = this.scope.ctrl.data.yAxis;
    let histogramData = _.map(xBucket.buckets, bucket => {
      let count = bucket.count !== undefined ? bucket.count : bucket.values.length;
      return [bucket.bounds.bottom, count];
    });
    histogramData = _.filter(histogramData, d => {
      return d[0] >= min && d[0] <= max;
    });

    let scale = this.scope.yScale.copy();
    let histXScale = scale
    .domain([min, max])
    .range([0, HISTOGRAM_WIDTH]);

    let barWidth;
    if (this.panel.yAxis.logBase === 1) {
      barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
    } else {
      let barNumberFactor = yBucketSize ? yBucketSize : 1;
      barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / barNumberFactor * 0.9);
    }
    barWidth = Math.max(barWidth, 1);

    // Normalize histogram Y axis
    let histogramDomain = _.reduce(_.map(histogramData, d => d[1]), (sum, val) => sum + val, 0);
    let histYScale = d3.scaleLinear()
      .domain([0, histogramDomain])
      .range([0, HISTOGRAM_HEIGHT]);

    let histogram = this.tooltip.select(".heatmap-histogram")
    .append("svg")
    .attr("width", HISTOGRAM_WIDTH)
    .attr("height", HISTOGRAM_HEIGHT);

    histogram.selectAll(".bar").data(histogramData)
    .enter().append("rect")
    .attr("x", d => {
      return histXScale(d[0]);
    })
    .attr("width", barWidth)
    .attr("y", d => {
        return HISTOGRAM_HEIGHT - histYScale(d[1]);
      })
      .attr("height", d => {
        return histYScale(d[1]);
      });
  }

  addYAxisFromBuckets() {
    const tsBuckets = this.data.tsBuckets;

    this.scope.yScale = this.yScale = d3
      .scaleLinear()
      .domain([0, tsBuckets.length - 1])
      .range([this.chartHeight, 0]);

    const tick_values = _.map(tsBuckets, (b, i) => i);
    const decimalsAuto = _.max(_.map(tsBuckets, ticksUtils.getStringPrecision));
    const decimals = this.panel.yAxis.decimals === null ? decimalsAuto : this.panel.yAxis.decimals;
    this.ctrl.decimals = decimals;

    const tickValueFormatter = this.tickValueFormatter.bind(this);
    function tickFormatter(valIndex) {
      let valueFormatted = tsBuckets[valIndex];
      if (!_.isNaN(_.toNumber(valueFormatted)) && valueFormatted !== '') {
        // Try to format numeric tick labels
        valueFormatted = tickValueFormatter(decimals)(_.toNumber(valueFormatted));
      }
      return valueFormatted;
    }

    const tsBucketsFormatted = _.map(tsBuckets, (v, i) => tickFormatter(i));
    this.data.tsBucketsFormatted = tsBucketsFormatted;

    const yAxis = d3
      .axisLeft(this.yScale)
      .tickValues(tick_values)
      .tickFormat(tickFormatter)
      .tickSizeInner(0 - this.width)
      .tickSizeOuter(0)
      .tickPadding(Y_AXIS_TICK_PADDING);

    this.heatmap
      .append('g')
      .attr('class', 'axis axis-y')
      .call(yAxis);

    // Calculate Y axis width first, then move axis into visible area
    const posY = this.margin.top;
    const posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
    this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');

    // Remove vertical line in the right of axis labels (called domain in d3)
    this.heatmap
      .select('.axis-y')
      .select('.domain')
      .remove();
  }

export function getOpacityScale(options, maxValue, minValue = 0) {
  let legendOpacityScale;
  if (options.colorScale === 'linear') {
    legendOpacityScale = d3
      .scaleLinear()
      .domain([minValue, maxValue])
      .range([0, 1]);
  } else if (options.colorScale === 'sqrt') {
    legendOpacityScale = d3
      .scalePow()
      .exponent(options.exponent)
      .domain([minValue, maxValue])
      .range([0, 1]);
  }
  return legendOpacityScale;
}

  constructor(rootElt: AnySvgSelection, bounds: ChartBounds) {
    this.bounds = bounds;

    this.xScale = d3.scaleTime().range(
      [bounds.axisSize + bounds.margin,
       bounds.width - bounds.margin]);
    this.yScale = d3.scaleLinear().range(
      [bounds.height - bounds.axisSize - bounds.margin,
       bounds.margin]);

    this.yAxis = d3.axisLeft<number>(this.yScale)
      .ticks(3);
    this.xAxis = d3.axisBottom<Date>(this.xScale)
      .ticks(d3.timeDay.every(1))
      .tickFormat(d3.timeFormat("%b %d"));

    this.lineSpec = d3.line<DataPoint>()
      .x((d: DataPoint) => this.xScale(new Date(d.unix_seconds * 1000)))
      .y((d: DataPoint) => this.yScale(d.temperature));

    this.rootElt = rootElt;

    this.precipBar = new IntensityBand<DataPoint>(
      (d: DataPoint) => d.precipitation_chance,
      intensity.blue,
      {
        width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
        height: 3,
        xPos: this.bounds.axisSize + this.bounds.margin,
        yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin,
      },
      this.rootElt,
      "precipBar");

    this.cloudsBar = new IntensityBand<DataPoint>(
      (d: DataPoint) => d.clouds,
      intensity.gray,
      {
        width: this.bounds.width - this.bounds.axisSize - 2 * this.bounds.margin,
        height: 3,
        xPos: this.bounds.axisSize + this.bounds.margin,
        yPos: this.bounds.height - this.bounds.axisSize - this.bounds.margin + 3,
      },
      this.rootElt,
      "cloudsBar");

}

  addHistogram(data) {
    let xBucket = this.scope.ctrl.data.buckets[data.x];
    let yBucketSize = this.scope.ctrl.data.yBucketSize;
    let {min, max, ticks} = this.scope.ctrl.data.yAxis;
    let histogramData = _.map(xBucket.buckets, bucket => {
      return [bucket.y, bucket.values.length];
    });
    histogramData = _.filter(histogramData, d => {
      return d[0] >= min && d[0] <= max;
    });

    let scale = this.scope.yScale.copy();
    let histXScale = scale
      .domain([min, max])
      .range([0, HISTOGRAM_WIDTH]);

    let barWidth;
    if (this.panel.yAxis.logBase === 1) {
      barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
    } else {
      barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / yBucketSize * 0.9);
    }
    barWidth = Math.max(barWidth, 1);

    let histYScale = d3.scaleLinear()
      .domain([0, _.max(_.map(histogramData, d => d[1]))])
      .range([0, HISTOGRAM_HEIGHT]);

    let histogram = this.tooltip.select(".heatmap-histogram")
      .append("svg")
      .attr("width", HISTOGRAM_WIDTH)
      .attr("height", HISTOGRAM_HEIGHT);

    histogram.selectAll(".bar").data(histogramData)
      .enter().append("rect")
      .attr("x", d => {
        return histXScale(d[0]);
      })
      .attr("width", barWidth)
      .attr("y", d => {
        return HISTOGRAM_HEIGHT - histYScale(d[1]);
      })
      .attr("height", d => {
        return histYScale(d[1]);
      });
  }

export function computeDomain(values: number[], ignoreOutliers: boolean) {
  // Don't include infinities and NaNs in the domain computation.
  values = values.filter(z => isFinite(z));

  if (values.length === 0) {
    return [-0.1, 1.1];
  }
  let a: number;
  let b: number;
  if (ignoreOutliers) {
    let sorted = _.sortBy(values);
    a = d3.quantile(sorted, 0.05);
    b = d3.quantile(sorted, 0.95);
  } else {
    a = d3.min(values);
    b = d3.max(values);
  }

  let padding: number;
  let span = b - a;
  if (span === 0) {
    // If b===a, we would create an empty range. We instead select the range
    // [0, 2*a] if a > 0, or [-2*a, 0] if a < 0, plus a little bit of
    // extra padding on the top and bottom of the plot.
    padding = Math.abs(a) * 1.1 + 1.1;
  } else {
    padding = span * 0.2;
  }

  let lower: number;
  if (a >= 0 && a < span) {
    // We include the intercept (y = 0) if doing so less than doubles the span
    // of the y-axis. (We actually select a lower bound that's slightly less
    // than 0 so that 0.00 will clearly be written on the lower edge of the
    // chart. The label on the lowest tick is often filtered out.)
    lower = -0.1 * b;
  } else {
    lower = a - padding;
  }


  let domain = [lower, b + padding];
  domain = d3.scaleLinear().domain(domain).nice().domain();
  return domain;
}

function drawSimpleOpacityLegend(elem, options) {
  const legendElem = $(elem).find('svg');
  clearLegend(elem);

  const legend = d3.select(legendElem.get(0));
  const legendWidth = Math.floor(legendElem.outerWidth());
  const legendHeight = legendElem.attr('height');

  if (legendWidth) {
    let legendOpacityScale;
    if (options.colorScale === 'linear') {
      legendOpacityScale = d3
        .scaleLinear()
        .domain([0, legendWidth])
        .range([0, 1]);
    } else if (options.colorScale === 'sqrt') {
      legendOpacityScale = d3
        .scalePow()
        .exponent(options.exponent)
        .domain([0, legendWidth])
        .range([0, 1]);
    }

    const rangeStep = 10;
    const valuesRange = d3.range(0, legendWidth, rangeStep);
    const legendRects = legend.selectAll('.heatmap-opacity-legend-rect').data(valuesRange);

    legendRects
      .enter()
      .append('rect')
      .attr('x', d => d)
      .attr('y', 0)
      .attr('width', rangeStep)
      .attr('height', legendHeight)
      .attr('stroke-width', 0)
      .attr(
        'fill',
        getColorFromHexRgbOrName(
          options.cardColor,
          contextSrv.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
        )
      )
      .style('opacity', d => legendOpacityScale(d));
  }
}

  function addYAxis() {
    let ticks = Math.ceil(chartHeight / DEFAULT_Y_TICK_SIZE_PX);
    let tick_interval = ticksUtils.tickStep(data.heatmapStats.min, data.heatmapStats.max, ticks);
    let { y_min, y_max } = wideYAxisRange(data.heatmapStats.min, data.heatmapStats.max, tick_interval);

    // Rewrite min and max if it have been set explicitly
    y_min = panel.yAxis.min !== null ? panel.yAxis.min : y_min;
    y_max = panel.yAxis.max !== null ? panel.yAxis.max : y_max;

    // Adjust ticks after Y range widening
    tick_interval = ticksUtils.tickStep(y_min, y_max, ticks);
    ticks = Math.ceil((y_max - y_min) / tick_interval);

    let decimalsAuto = ticksUtils.getPrecision(tick_interval);
    let decimals = panel.yAxis.decimals === null ? decimalsAuto : panel.yAxis.decimals;
    // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
    let flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
    let scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
    ctrl.decimals = decimals;
    ctrl.scaledDecimals = scaledDecimals;

    // Set default Y min and max if no data
    if (_.isEmpty(data.buckets)) {
      y_max = 1;
      y_min = -1;
      ticks = 3;
      decimals = 1;
    }

    data.yAxis = {
      min: y_min,
      max: y_max,
      ticks: ticks,
    };

    scope.yScale = yScale = d3
      .scaleLinear()
      .domain([y_min, y_max])
      .range([chartHeight, 0]);

    let yAxis = d3
      .axisLeft(yScale)
      .ticks(ticks)
      .tickFormat(tickValueFormatter(decimals, scaledDecimals))
      .tickSizeInner(0 - width)
      .tickSizeOuter(0)
      .tickPadding(Y_AXIS_TICK_PADDING);

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

    // Calculate Y axis width first, then move axis into visible area
    let posY = margin.top;
    let posX = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
    heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');

    // Remove vertical line in the right of axis labels (called domain in d3)
    heatmap
      .select('.axis-y')
      .select('.domain')
      .remove();
  }

export function generateD3Chart(selector, tpl: [VisData, State]) {
  let [data, state] = tpl;

  // Configuration
  let animationDuration = 350;
  let keyArray: string[] = state.selectedCategories.map(c => { return c[0].toLowerCase(); });
  let width = 600;
  let height = 600;
  let padding = 5;

  let h = sliceNDice(data, keyArray);
  let cfjjColor = d3.scaleLinear()
    .domain([0, keyArray.length])
    .range(['#24567e', '#75c7f0']);

  let root = d3.select(selector)
      .attr('width', width)
      .attr('height', height);
  let halfWidth = width / 2;
  let halfHeight = height / 2;

  let rootNode = d3.hierarchy(h);
  rootNode.sum(d => { return d.number; });
  rootNode.sort((d1, d2) => { return d2.value - d1.value; });

  let pack = d3.pack()
      .padding(padding)
      .size([width - padding - 1, height - padding - 1]);
  let foo = pack(rootNode);

  let descendants = rootNode.descendants();
  let nodeS = root.selectAll('circle')
      .data(descendants.filter(n => { return n.depth <= keyArray.length; }),
        node => { return node.data.id; });

  nodeS.enter()
    .append('circle')
      .attr('cx', halfWidth)
      .attr('cy', halfHeight)
      .attr('r', 0)
    .merge(nodeS)
    .transition().duration(animationDuration)
      .attr('fill', n => { return cfjjColor(n.depth); })
      .attr('cx', d => { return d.x; })
      .attr('cy', d => { return d.y; })
      .attr('r', d => { return d.r; });

  nodeS.exit()
    .transition().duration(animationDuration)
      .attr('cx', halfWidth)
      .attr('cy', halfHeight)
      .attr('r', 0)
      .remove();

  let textS = root.selectAll('text')
      .data(descendants.filter(n => { return n.depth == keyArray.length; }),
        node => { return node.data.id; });

  textS.enter()
    .append('text')
      .attr('x', halfWidth)
      .attr('y', halfHeight)
      .attr('text-anchor', 'middle')
      .attr('alignment-baseline', 'middle')
      .style('font-family', 'sans-serif')
      .attr('opacity', 0.0)
      .html(d => {
        return d.data.keyValue;
      })
    .merge(textS).transition().duration(animationDuration)
      .attr('x', d => { return d.x; })
      .attr('y', d => { return d.y; })
      .attr('opacity', 1.0);

  textS.exit().transition().duration(animationDuration)
      .attr('x', halfWidth)
      .attr('y', halfHeight)
      .attr('opacity', 0.0)
      .remove();
}

            scope.render_heatmap = function (data) {
                // Don't render chart if there is no data
                scope.disableChart = false;
                if (data.length < 1) {
                  scope.disableChart = true;
                  d3.select('svg').remove();
                  return;
                }

                d3.select('svg').remove();
                const margin = { top: 50, right: 75, bottom: 0, left: 40 };
                const svgWidth = element[0].parentElement.parentElement.parentElement.offsetParent.offsetWidth - margin.left - margin.right;
                const rectSize = Math.floor(svgWidth / 24);
                const svgHeight = Math.floor(rectSize * 9) - margin.top - margin.bottom;
                const days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
                const hours = [
                  '00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
                  '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
                  '20', '21', '22', '23',
                ];

                const svg = d3.select(element[0]).append('svg')
                    .attr('width', svgWidth + margin.left + margin.right)
                    .attr('height', svgHeight + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

                const max_value_initial = d3.max(data, function (d) {
                    return d.count;
                });
                let max_value = max_value_initial;

                if (max_value_initial > 100000) {
                    max_value = max_value_initial / 100;
                } else if (max_value_initial == 0) {
                    max_value = 1;
                }

                // Generate color from color scale
                const genColor = d3.scaleLinear()
                    .domain([0, max_value / 2, max_value])
                    .range(['white', '#3498db', 'red']);

                const colors: any[] = [];
                for (let i = 0; i < max_value; i++) {
                    colors.push(genColor(i));
                }
                const num_buckets = colors.length;
                const colorScale = d3.scaleQuantile()
                    .domain([0, num_buckets - 1, max_value_initial])
                    .range(colors);

                svg.selectAll('.dayLabel')
                    .data(days)
                    .enter().append('text')
                    .text(function (d) {
                        return d;
                    })
                    .attr('x', -12)
                    .attr('y', function (d, i) {
                        return i * rectSize;
                    })
                    .style('text-anchor', 'end')
                    .attr('transform', 'translate(-6,' + rectSize / 1.5 + ')');

                svg.selectAll('.hourLabel')
                    .data(hours)
                    .enter().append('text')
                    .text(function (d) {
                        return d;
                    })
                    .attr('x', function (d, i) {
                        return i * rectSize;
                    })
                    .attr('y', -12)
                    .style('text-anchor', 'middle')
                    .attr('transform', 'translate(' + rectSize / 2 + ', -6)');

                // Create the heatmap
                const heatMap = svg.selectAll('.hour')
                    .data(data)
                    .enter().append('rect')
                    .attr('x', function (d) {
                        return (d.hour) * rectSize;
                    })
                    .attr('y', function (d) {
                        return (d.day - 1) * rectSize;
                    })
                    .attr('class', 'bordered')
                    .attr('width', rectSize)
                    .attr('height', rectSize)
                    .style('fill', 'white');

                // Fade in the chart and fill each box with color
                heatMap.transition().duration(500)
                    .style('fill', function (d) {
                        return colorScale(d.count);
                    });

                // Display event count on hover
//.........这里部分代码省略.........

    public render() {
        let labels = null,
            invertColorScale = this.config.get('invertColorScale'),
            colorScale = this.config.get('colorScale'),
            width = this.config.get('width'),
            height = this.config.get('height'),
            ringWidth = this.config.get('ringWidth'),
            ringMargin = this.config.get('ringMargin'),
            ticks = this.config.get('ticks'),
            minAngle = this.config.get('minAngle'),
            maxAngle = this.config.get('maxAngle'),
            minLevel = this.config.get('minLevel'),
            maxLevel = this.config.get('maxLevel'),
            labelInset = this.config.get('labelInset'),
            scale = scaleLinear()
                .domain([minLevel, maxLevel])
                .range([0, 1]),
            scaleMarkers = scale.ticks(ticks),

            range = maxAngle - minAngle,
            r = ((width > height) ?
                height : width
            ) / 2,
            translation = (() => 'translate(' + r + ',' + r + ')'),
            tickData = d3range(ticks).map(() => 1 / ticks),
            arc: Arc<any, any> = d3arc()
                .innerRadius(r - ringWidth - ringMargin)
                .outerRadius(r - ringMargin)
                .startAngle((d: any, i) => deg2rad(minAngle + ((d * i) * range)))
                .endAngle((d: any, i) => deg2rad(minAngle + ((d * (i + 1)) * range)));

        colorScale.domain([0, 1]);

        // Append the ring
        let arcs = this.svg.append('g')
            .attr('class', 'arc')
            .attr('transform', translation);

        // Append the ring sectors
        let arcPaths = arcs.selectAll('path')
            .data(tickData)
            .enter().append('path')
            // ID for textPath linking
            .attr('id', (d, i) => 'sector-' + i)
            .attr('d', arc);

        // Fill colors
        arcPaths.attr('fill', (d: number, i: number) => colorScale(invertColorScale
            ? (1 - d * i)
            : (d * i))
        );

        // Apend the scale labels
        labels = this.svg.append('g')
            .attr('class', 'labels')
            .attr('transform', translation);

        // // Append scale marker labels
        labels.selectAll('text')
            .data(scaleMarkers)
            .enter().append('text')
            .attr('transform', (d) => {
                let ratio = scale(d);
                let newAngle = minAngle + (ratio * range);
                return 'rotate(' + newAngle + ') translate(0,' + (labelInset - r) + ')';
            })
            .text((d) => d)
            .style('text-anchor', 'middle');
    }

  ngOnInit() {
    // 2. Use the margin convention practice 
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width 
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 21;

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
  .domain([0, n-1]) // input
  .range([0, width]); // output

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()
  .domain([0, 1]) // input 
  .range([height, 0]); // output 

// 7. d3's line generator
var line = d3.line()
  .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
  .y(function(d) { 
    console.log("dy", d['y'])
    return yScale(d['y']); }) // set the y values for the line generator 
  .curve(d3.curveMonotoneX) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

// 1. Add the SVG to the page and employ #2
var svg = d3.select("body").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 + ")");

// 3. Call the x axis in a group tag
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
svg.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator 
svg.append("path")
  .datum(dataset) // 10. Binds data to the line 
  .attr("class", "line") // Assign a class for styling 
 // .attr("d", line); // 11. Calls the line generator 

// 12. Appends a circle for each datapoint 
svg.selectAll(".dot")
  .data(dataset)
.enter().append("circle") // Uses the enter().append() method
  .attr("class", "dot") // Assign a class for styling
  .attr("cx", function(d, i) { return xScale(i) })
  .attr("cy", function(d) { return yScale(d.y) })
  .attr("r", 5);
  }

  calcMapping(emitFocusUpdate?) {
    // called every time after the focus is changed
    const focus = this.scope.plotFocus.getFocus();
    const leftMargin = this.scope.layout.leftLayoutMargin;
    const bottomMargin = this.scope.layout.bottomLayoutMargin;
    const topMargin = this.scope.layout.topLayoutMargin;
    const rightMargin = this.scope.layout.rightLayoutMargin;
    const W = plotUtils.safeWidth(this.scope.jqsvg);
    const H = plotUtils.safeHeight(this.scope.jqsvg);

    if (emitFocusUpdate && this.scope.model.updateFocus != null) {
      this.scope.model.updateFocus({
        "xl" : focus.xl,
        "xr" : focus.xr
      });
    }

    this.data2scrY = d3.scaleLinear()
      .domain([focus.yl, focus.yr])
      .range([H - bottomMargin, topMargin]);

    this.data2scrYp = d3.scaleLinear()
      .domain([focus.yl, focus.yr])
      .range([1, 0]);

    this.scr2dataY = d3.scaleLinear()
      .domain([topMargin, H - bottomMargin])
      .range([focus.yr, focus.yl]);

    this.scr2dataYp = d3.scaleLinear()
      .domain([topMargin, H - bottomMargin])
      .range([1, 0]);

    this.data2scrX = d3.scaleLinear()
      .domain([focus.xl, focus.xr])
      .range([leftMargin, W - rightMargin]);

    this.data2scrXp = d3.scaleLinear()
      .domain([focus.xl, focus.xr])
      .range([0, 1]);

    this.scr2dataX = d3.scaleLinear()
      .domain([leftMargin, W - rightMargin])
      .range([focus.xl, focus.xr]);

    this.scr2dataXp = d3.scaleLinear()
      .domain([leftMargin, W - rightMargin])
      .range([0, 1]);

    if (focus.yr_r !== undefined && focus.yl_r !== undefined) {
      this.data2scrY_r = d3.scaleLinear()
        .domain([focus.yl_r, focus.yr_r])
        .range([H - bottomMargin, topMargin]);

      this.data2scrYp_r = d3.scaleLinear()
        .domain([focus.yl_r, focus.yr_r])
        .range([1, 0]);

      this.scr2dataY_r = d3.scaleLinear()
        .domain([topMargin, H - bottomMargin])
        .range([focus.yr_r, focus.yl_r]);

      this.scr2dataYp_r = d3.scaleLinear()
        .domain([topMargin, H - bottomMargin])
        .range([1, 0]);
    }

    this.data2scrXi = (val) => Number(this.data2scrX(val).toFixed(this.scope.renderFixed));
    this.data2scrYi = (val) => Number(this.data2scrY(val).toFixed(this.scope.renderFixed));

    if (this.data2scrY_r !== undefined) {
      this.data2scrYi_r = (val) => Number(this.data2scrY_r(val).toFixed(this.scope.renderFixed));
    }
  }

 render(): void {
     this._xRadialAxis = scaleLinear().range([0, 2 * Math.PI]);
 }

  addHistogram(data) {
    const xBucket = this.scope.ctrl.data.buckets[data.x];
    const yBucketSize = this.scope.ctrl.data.yBucketSize;
    let min, max, ticks;
    if (this.scope.ctrl.data.tsBuckets) {
      min = 0;
      max = this.scope.ctrl.data.tsBuckets.length - 1;
      ticks = this.scope.ctrl.data.tsBuckets.length;
    } else {
      min = this.scope.ctrl.data.yAxis.min;
      max = this.scope.ctrl.data.yAxis.max;
      ticks = this.scope.ctrl.data.yAxis.ticks;
    }
    let histogramData = _.map(xBucket.buckets, bucket => {
      const count = bucket.count !== undefined ? bucket.count : bucket.values.length;
      return [bucket.bounds.bottom, count];
    });
    histogramData = _.filter(histogramData, d => {
      return d[0] >= min && d[0] <= max;
    });

    const scale = this.scope.yScale.copy();
    const histXScale = scale.domain([min, max]).range([0, HISTOGRAM_WIDTH]);

    let barWidth;
    if (this.panel.yAxis.logBase === 1) {
      barWidth = Math.floor((HISTOGRAM_WIDTH / (max - min)) * yBucketSize * 0.9);
    } else {
      const barNumberFactor = yBucketSize ? yBucketSize : 1;
      barWidth = Math.floor((HISTOGRAM_WIDTH / ticks / barNumberFactor) * 0.9);
    }
    barWidth = Math.max(barWidth, 1);

    // Normalize histogram Y axis
    const histogramDomain = _.reduce(_.map(histogramData, d => d[1]), (sum, val) => sum + val, 0);
    const histYScale = d3
      .scaleLinear()
      .domain([0, histogramDomain])
      .range([0, HISTOGRAM_HEIGHT]);

    const histogram = this.tooltip
      .select('.heatmap-histogram')
      .append('svg')
      .attr('width', HISTOGRAM_WIDTH)
      .attr('height', HISTOGRAM_HEIGHT);

    histogram
      .selectAll('.bar')
      .data(histogramData)
      .enter()
      .append('rect')
      .attr('x', d => {
        return histXScale(d[0]);
      })
      .attr('width', barWidth)
      .attr('y', d => {
        return HISTOGRAM_HEIGHT - histYScale(d[1]);
      })
      .attr('height', d => {
        return histYScale(d[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');

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

  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) {
//.........这里部分代码省略.........

    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('r