d3 v4

作者: 站着瞌睡 | 来源:发表于2018-01-01 19:44 被阅读0次

    1.  d3.brush()  //选中或者刷子

    d3.brushX()   d3.brushY()   brush.extent([]||function) 创建brush的范围      brush.handlesize([size])拖选的宽高,默认为6     brush.on('start brush end',function)事件监听,只有三个时间start brush end,跟回调事件

    2.d3的12钟地图投影

    (1)d3.geoAlbersUsa()阿伯斯投影  ;(2)d3.geoAzimuthalEqualArea()等面积方位投影  ;(3)d3.geoAzimuthalEquidistant()等距方位投影  ;(4)d3.geoConicConformal()圆锥共形投影 ; (5)d3.geoConicEqualArea()圆锥等面积投影 ; (6)d3.geoConicEquidistant()圆锥等距投影 ; (7)d3.geoEquirectangular()相等矩形投影  ; (8)d3.geoGnomonic()球心投影  ; (9)d3.geoMercator()墨卡托投影 ; (10)d3.geoOrthographic()正射投影  ; (11)d3.geostereographic()极射赤平投影 ; (12)d3.geoTransverseMercator()横向墨卡托投影。

    3.d3的路径path()

    d3.geoPath.projection(projection)绘制路径

    projection().fitSize([width,height],pathdata)//根据长宽适应路径大小

    4.topojson   d3推荐使用的地理数据json格式

    topojson.feature(result,result.object)  //将result的topojson数据转换成geojson格式,            topojson.mesh(result,result.object,function(a,b){return boolean}) //将result的topojson数据转换成GeoJSON MultiLineString格式,第三个参数是返回布尔值,a是数据数组的第一个,b是非第一个的数据

    5.scale

    基本的d3.scaleLinear().domain([]).range([]),domain映射range的值

    continuous.invert()反向映射,range映射domain的值

    .scaleTime()//时间长度,.range(a,b,der) or .range(a)    scaleLinear()//等间隔线性长度  continuous.ticks(count)把domain分成count返回数组    continuous.tickFormat(count,specifier) 返回一个函数,对domain格式化    

    6.常用函数

    (1)range(a,b,der)可以是一个参数或者三个参数      map(function(d){return d})映射要return  .randomBates()//不同的数据分布    format('.0f')//格式化返回的是函数format('.0f')(value)

    7.时间

    interval.ceil()    interval.floor()      interval.round()  时间的约等于,interval.domain(start,end,step)是一个时间数组,step是间隔数(1,2,3。。。)  interval.count()计数,统计多少个    interval.every(number)是日期间隔number=1,2,3。。。    interval.offset(date,step)现在的时间前进step时间    interval.filter(function(d){return})过滤时间    d3.timeInterval() 创建新的interval    d3.timeDay是单个时间,d3.timeDays(start,end,step)时间数组

    8.axis轴

    d3.axisBottom(x) d3.axisTop(x)  d3.axisLeft(y)  d3.axisRight(y) 各个位置的轴,axis.scale(x)如果有轴的数据指向x如果没有就返回原来的, 

    axis.ticks(arguments…)axis.ticks([count[,specifier]])axis.ticks([interval[,specifier]])可以直接传入count刻度数,也可以再加一个specifier值变换或者时间值   

    axis.tickValues([])传入数组代替ticks,传入的数组值在domain范围内

    axis.tickFormat(function(d){return})格式化tick的值

    axis.tickSizeInner([size])刻度的长度

    9.histogram()直方图

    d3.histogram()(data)传入数据,返回一组数组,每个数组都是一个容器数组,包含数据个数,以及额外的两个属性x0,x1是这个容器的数据范围     

    d3.histogram()用histogram表示   histogram.domain()是指的直方图给取data的这部份    histogram.thresholds(count)将data分count个容器里也就是控制x0,x1的值

    10.d3-transition

    d3.transition()过度函数  d3.transition().duration(time).ease().delay()过渡时间和过度曲线、延迟触发    d3.active()是过度的中开始的过程,d3.interrupt(node,name)取消过度,node是节点 name是过度内容

    11.d3-ease

    过渡曲线

    12.d3.format

    d3.format('.0%')(0.1235)//12%  格式成百分数,0表示保留0位小数

    13.d3.zoom

    d3.zoom()

    相关文章

      网友评论

          本文标题:d3 v4

          本文链接:https://www.haomeiwen.com/subject/jroxrxtx.html