TypeScript d3.scaleLinear函數代碼示例

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

  let legend = d3.select(legendElem.get(0));
  let legendWidth = Math.floor(legendElem.outerWidth());
  let 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]);
    }

    let rangeStep = 10;
    let valuesRange = d3.range(0, legendWidth, rangeStep);
    var 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", options.cardColor)
      .style("opacity", d => legendOpacityScale(d));
  }
}

function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth) {
  let legendElem = $(elem).find('svg');
  let legend = d3.select(legendElem.get(0));

  if (legendWidth <= 0 || legendElem.get(0).childNodes.length === 0) {
    return;
  }

  let legendValueScale = d3.scaleLinear()
    .domain([0, rangeTo])
    .range([0, legendWidth]);

  let ticks = buildLegendTicks(0, rangeTo, maxValue, minValue);
  let xAxis = d3.axisBottom(legendValueScale)
    .tickValues(ticks)
    .tickSize(2);

  let colorRect = legendElem.find(":first-child");
  let posY = colorRect.height() + 2;
  let posX = getSvgElemX(colorRect);

  d3.select(legendElem.get(0)).append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + posX + "," + posY + ")")
    .call(xAxis);

  legend.select(".axis").select(".domain").remove();
}

  function addYAxis() {
    let ticks = Math.ceil(chartHeight / DEFAULT_Y_TICK_SIZE_PX);
    let tick_interval = 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 = tickStep(y_min, y_max, ticks);
    ticks = Math.ceil((y_max - y_min) / tick_interval);

    let decimalsAuto = 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 = getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
    let scaledDecimals = 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();
  }

 function setOpacityScale(maxValue) {
   if (panel.color.colorScale === 'linear') {
     opacityScale = d3.scaleLinear()
     .domain([0, maxValue])
     .range([0, 1]);
   } else if (panel.color.colorScale === 'sqrt') {
     opacityScale = d3.scalePow().exponent(panel.color.exponent)
     .domain([0, maxValue])
     .range([0, 1]);
   }
 }

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

  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.bounds.bottom, 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 {
      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]);
      });
  }