• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

TypeScript d3.axisLeft函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中d3.axisLeft函数的典型用法代码示例。如果您正苦于以下问题：TypeScript axisLeft函数的具体用法？TypeScript axisLeft怎么用？TypeScript axisLeft使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了axisLeft函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: addLogYAxis

  function addLogYAxis() {
    let log_base = panel.yAxis.logBase;
    let {y_min, y_max} = adjustLogRange(data.heatmapStats.minLog, data.heatmapStats.max, log_base);

    y_min = panel.yAxis.min && panel.yAxis.min !== '0' ? adjustLogMin(panel.yAxis.min, log_base) : y_min;
    y_max = panel.yAxis.max !== null ? adjustLogMax(panel.yAxis.max, log_base) : y_max;

    // Set default Y min and max if no data
    if (_.isEmpty(data.buckets)) {
      y_max = Math.pow(log_base, 2);
      y_min = 1;
    }

    scope.yScale = yScale = d3.scaleLog()
      .base(panel.yAxis.logBase)
      .domain([y_min, y_max])
      .range([chartHeight, 0]);

    let domain = yScale.domain();
    let tick_values = logScaleTickValues(domain, log_base);

    let decimalsAuto = getPrecision(y_min);
    let decimals = panel.yAxis.decimals || decimalsAuto;

    // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
    let flot_tick_size = getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
    let scaledDecimals = getScaledDecimals(decimals, flot_tick_size);
    ctrl.decimals = decimals;
    ctrl.scaledDecimals = scaledDecimals;

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

    let yAxis = d3.axisLeft(yScale)
      .tickValues(tick_values)
      .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 + ")");

    // Set first tick as pseudo 0
    if (y_min < 1) {
      heatmap.select(".axis-y").select(".tick text").text("0");
    }

    // Remove vertical line in the right of axis labels (called domain in d3)
    heatmap.select(".axis-y").select(".domain").remove();
  }
开发者ID:postsql，项目名称:grafana，代码行数:60，代码来源:rendering.ts


示例2: makeAxis

function makeAxis(svg, margin, xScale, yScale, width, height) {
  const axisBottom = d3.axisBottom(xScale);
  axisBottom.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${height + margin.top})`)
    .call(axisBottom);

  const axisLeft = d3.axisLeft(yScale);
  axisLeft.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)
    .call(axisLeft);

  const axisRight = d3.axisRight(yScale);
  axisRight.ticks(0);
  axisRight.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${width + margin.left},${margin.top})`)
    .call(axisRight);

  const axisTop = d3.axisTop(xScale);
  axisTop.ticks(0);
  axisTop.tickSizeOuter(0);
  svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)
    .call(axisTop);
}
开发者ID:Befirst-Solutions，项目名称:propel，代码行数:27，代码来源:matplotlib.ts


示例3: function

    }, 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));
    });
开发者ID:hasadna，项目名称:open_pension，代码行数:32，代码来源:detail-pai.component.ts


示例4: addYAxis

  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();
  }
开发者ID:postsql，项目名称:grafana，代码行数:58，代码来源:rendering.ts


示例5: axes

export function* axes(xtitle, ytitle, changeLimits) {

  let margin = { top: 20, right: 25, bottom: 30, left: 50 },
    width = 480 - margin.left - margin.right,
    height = 180 - margin.top - margin.bottom;

  let 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 + ")");
  
  let colors = d3.scaleOrdinal(d3.schemeCategory10);
  let x = d3.scaleLinear().range([0, width]);
  let y = d3.scaleLinear().range([height, 0]);
  let x_axis = d3.axisBottom(x);
  let y_axis = d3.axisLeft(y);
  let x_node = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
  let y_node = svg.append("g")
    .attr("class", "y axis");

  x_node.append("text")
    .attr("transform", "translate(" + width + ", 0)")
    .text(xtitle);
  y_node.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(ytitle);

  let l = d3.line()
    .x(function (d, n) { return x(n) })
    .y(function (d) { return y(d) });
  let p = svg.append("path")
    .attr("class", "line")
    .attr("stroke", colors("1"));

  let first = true;
  while (true) {
    let data = yield svg;
    let ymin = Math.min(...data);
    let ymax = Math.max(...data);
    if (changeLimits || first) {
      first = false;
      x.domain([0, data.length]);
      y.domain([ymin, ymax]);
    }
    // update axes
    x_node.call(x_axis);
    y_node.call(y_axis);

    p.datum(data)
      .attr("d", l);
  }
}
开发者ID:hessammehr，项目名称:coalescence，代码行数:58，代码来源:plot-utils.ts


示例6: addYAxisFromBuckets

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

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

    const tickValues = _.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(tickValues)
      .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 + ')');

    if (this.panel.yBucketBound === 'middle' && tickValues && tickValues.length) {
      // Shift Y axis labels to the middle of bucket
      const tickShift = 0 - this.chartHeight / (tickValues.length - 1) / 2;
      this.heatmap.selectAll('.axis-y text').attr('transform', 'translate(' + 0 + ',' + tickShift + ')');
    }

    // Remove vertical line in the right of axis labels (called domain in d3)
    this.heatmap
      .select('.axis-y')
      .select('.domain')
      .remove();
  }
开发者ID:grafana，项目名称:grafana，代码行数:56，代码来源:rendering.ts


示例7: addYAxisFromBuckets

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

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

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

    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));
    data.tsBucketsFormatted = tsBucketsFormatted;

    let yAxis = d3
      .axisLeft(yScale)
      .tickValues(tick_values)
      .tickFormat(tickFormatter)
      .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
    const posY = margin.top;
    const 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();
  }
开发者ID:fangjianfeng，项目名称:grafana，代码行数:49，代码来源:rendering.ts


示例8: constructor

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

}
开发者ID:mrjones，项目名称:weather-graphs，代码行数:47，代码来源:charting.ts


示例9: addLogYAxis

  addLogYAxis() {
    const log_base = this.panel.yAxis.logBase;
    let { y_min, y_max } = this.adjustLogRange(this.data.heatmapStats.minLog, this.data.heatmapStats.max, log_base);

    y_min =
      this.panel.yAxis.min && this.panel.yAxis.min !== '0' ? this.adjustLogMin(this.panel.yAxis.min, log_base) : y_min;
    y_max = this.panel.yAxis.max !== null ? this.adjustLogMax(this.panel.yAxis.max, log_base) : y_max;

    // Set default Y min and max if no data
    if (_.isEmpty(this.data.buckets)) {
      y_max = Math.pow(log_base, 2);
      y_min = 1;
    }

    this.scope.yScale = this.yScale = d3
      .scaleLog()
      .base(this.panel.yAxis.logBase)
      .domain([y_min, y_max])
      .range([this.chartHeight, 0]);

    const domain = this.yScale.domain();
    const tick_values = this.logScaleTickValues(domain, log_base);

    const decimalsAuto = ticksUtils.getPrecision(y_min);
    const decimals = this.panel.yAxis.decimals || decimalsAuto;

    // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
    const flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
    const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
    this.ctrl.decimals = decimals;
    this.ctrl.scaledDecimals = scaledDecimals;

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

    const yAxis = d3
      .axisLeft(this.yScale)
      .tickValues(tick_values)
      .tickFormat(this.tickValueFormatter(decimals, scaledDecimals))
      .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 + ')');

    // Set first tick as pseudo 0
    if (y_min < 1) {
      this.heatmap
        .select('.axis-y')
        .select('.tick text')
        .text('0');
    }

    // Remove vertical line in the right of axis labels (called domain in d3)
    this.heatmap
      .select('.axis-y')
      .select('.domain')
      .remove();
  }
开发者ID:gzq0616，项目名称:grafana，代码行数:70，代码来源:rendering.ts


示例10: addYAxis

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

    // Rewrite min and max if it have been set explicitly
    y_min = this.panel.yAxis.min !== null ? this.panel.yAxis.min : y_min;
    y_max = this.panel.yAxis.max !== null ? this.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);

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

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

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

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

    const yAxis = d3
      .axisLeft(this.yScale)
      .ticks(ticks)
      .tickFormat(this.tickValueFormatter(decimals, scaledDecimals))
      .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();
  }
开发者ID:gzq0616，项目名称:grafana，代码行数:64，代码来源:rendering.ts



注：本文中的d3.axisLeft函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
TypeScript d3.bisector函数代码示例发布时间：2022-05-25
下一篇：
TypeScript d3.axisBottom函数代码示例发布时间：2022-05-25
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap