三、 刻度尺 axis

IT教程 2年前 (2020) https://www.55wd.com
1,557

刻度尺

坐标轴常用方法

方法 格式 说明
axisTop d3.axisTop() 生成刻度值在上方的刻度尺
axisBottom d3.axisBottom() 生成刻度值在底部的刻度尺
axisLeft d3.axisLeft() 生成刻度值在左侧的刻度尺
axisRight d3.axisRight() 生成刻度值在右侧的刻度尺
scale d3.axisTop().scale(scaleLinear) 按比例尺生成刻度尺
ticks ticks(num) 将刻度尺分成num分,但不一定是num分
tickValues tickValues[0,1,3,5] 刻度只显示值在这个数组中的值
tickFormat tickFormat(fn) 格式化刻度值显示内容,类似echarts的format
tickSize tickSize(num) 刻度线的大小
tickSizeInner tickSizeInner(num) 中间部分刻度线大小
tickSizeOuter tickSizeOuter(num) 边上两个刻度线大小
tickPadding tickPadding(num) 刻度值和刻度线的间隔
tickArguments 。。。 暂时貌似没什么用

下面来一个简单的例子

let scaleLinear = d3.scaleLinear()
  .domain([0,5])
  .range([0,400]);
var axisL = d3.axisLeft().scale(scaleLinear).tickPadding(15);
var axisT = d3.axisTop().scale(scaleLinear).tickFormat(function (a,b,c) {
  return a + '元'
});
var axisB = d3.axisBottom().scale(scaleLinear).tickValues([0,2,3]);
var axisR = d3.axisRight().scale(scaleLinear).tickSizeOuter(5);

let body = d3.select('body')
  .append('svg')
  .attr('width',800)
  .attr('height',500);

body.append('g')
  .attr('transform','translate(50,50)')
  .call(axisL);
body.append('g')
  .attr('transform','translate(450,50)')
  .call(axisR);
body.append('g')
  .attr('transform','translate(50,50)')
  .call(axisT);
body.append('g')
  .attr('transform','translate(50,450)')
  .call(axisB)

刻度尺生成时都是位于原点的,具体位置要计算得出后使用tranform移动到具体位置上

webService AxisFault

今天看了一下webService,写了一个测试,在测试的途中遇到一些问题。记录一下。。。Service端的代码package com.test.ws;import jav

Matlab中axis函数用法总结

axis主要是用来对坐标轴进行一定的缩放操作,其操作命令主要如下: 1、axis( [xmin xmax ymin ymax] )    设置当前坐标轴 x轴 和

axis2 bug

不显示插件图标的,换eclipse http://aspnetdb.iteye.com/blog/796819

文章回顾

大家看了本文三、 刻度尺 axis的精彩教程资源内容,是不是对三、 刻度尺 axis了解更多,真心希望三、 刻度尺 axis能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明:9589f7c07903f367 发表于 2020-07-12 11:48:28。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:三、 刻度尺 axis
本文地址:https://www.55wd.com/s108149/