D3.js的v5版本入门教程(第八章)—— 坐标轴

D3.js的v5版本入门教程(第八章)

D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成。D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单

为了表绘制一个坐标轴,我们还是需要以下新的知识点

call()函数    
    定义一个坐标轴

坐标轴是有朝向的,在这里我们以向下朝向、水平方向的坐标轴为例,其他朝向的(比如向左朝向的、垂直的坐标轴)类似,这里是接着上一章来的,数据用的也是上一章的

//为坐标轴定义一个线性比例尺
var xScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([0,250]);
//定义一个坐标轴
var xAxis = d3.axisBottom(xScale)//定义一个axis,由bottom可知,是朝下的
.ticks(7);//设置刻度数目
g.append("g")
.attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")
.call(xAxis);

代码说明:

-var xScale = d3.scaleLinear()
    .domain([0,d3.max(dataset)])

.range([0,250]);这是比例尺的定义,我们应该比较熟悉

-var xAxis = d3.axisBottom(xScale)//定义一个axis,由bottom可知,是朝下的

.ticks(7);//设置刻度数目,不过好像并不太好使

-g.append("g")
    .attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")

.call(xAxis);

这里需要重点说明一下

.attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")这是设置位置信息

g.append("g").call(xAxis),这里出现了一个新的函数,这也是这一章的重点,我们知道xAxis是我们定义的一个坐标轴,其实它本身也是一个函数,所以这句话的意思是将新建的分组<g>传给xAxis()函数,用以绘制,所以这句代码等价于

xAixs (g.append("g") ) ;

为柱状图添加坐标轴

好了,我们已经知道怎样绘制一个坐标轴了,现在为第七章绘制的柱状图加上一个坐标轴,代码很简单

<body>
<svg width="960" height="600"></svg>
<script>
var marge = {top:60,bottom:60,left:60,right:60}
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; 

var scaleLinear = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([0,250]);

var svg = d3.select("svg");
var g = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")");

var rectHeight = 30;

g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return scaleLinear(d);
})
.attr("height",rectHeight-5)
.attr("fill","blue");

//为坐标轴定义一个线性比例尺
var xScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([0,250]);
//定义一个坐标轴
var xAxis = d3.axisBottom(xScale)//定义一个axis,由bottom可知,是朝下的
.ticks(7);//设置刻度数目
g.append("g")
.attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")
.call(xAxis);
</script>
</body>

运行结果:

效果浏览:点击浏览效果

源码浏览:点击源码浏览
————————————————
版权声明:本文为CSDN博主「数星星等天明」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34414916/article/details/80032354

原文地址:https://www.cnblogs.com/cangqinglang/p/11609365.html

时间: 2024-10-13 16:32:27

D3.js的v5版本入门教程(第八章)—— 坐标轴的相关文章

D3.js的v5版本入门教程(第七章)—— 比例尺的使用

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺 线性比例尺序数比例尺        线性比例尺 domain域和range域都可以连续变化 <body> <sc

D3.js的v5版本入门教程(第十三章)—— 饼状图

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie

D3.js的v5版本入门教程(第九章)——完整的柱状图

D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBand():这也是一个坐标轴,可以根据输入的domain的长度,等分rangeRound域(类比range域)d3.range():这个比较复杂,建议去看百度(或者官方API),在这里我只讲一下这个返回一个等差数列    1.得到SVG画布 var marge = {top:60,bottom:60,

D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有三个<p>,如下 <p>dog</p> <p>cat</p> <p>pig</p> <p>rat</p> 选择第一个元素<p> var p = d3.select("body&qu

D3.js的v5版本入门教程(第十一章)——交互式操作

D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就会消失,或者鼠标单击一下某图形元素就会使它动起来 为了与图形元素进行交互操作,我们还是需要以下新的知识点 on("eventName",function):该函数是添加一个监听事件,它的第一个参数是事件类型,第二个参数是响应事件的内容d3.select(this),选择当前元素    常见

D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图 中国地图 我们利

D3.js的v5版本入门教程(第十章)

在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),transition()表示添加过渡,也就是从前一个属性过渡到后一个属性.duration(2000),表示过渡时间持续2秒.delay(500),表示延迟0.4秒后再进行过渡.ease(d3.easeElasticInOut)表示过渡方式,注意这里和v3版本的区别    有了上面的基础知识后,现在我们

d3.js(v5.7)的比例尺以及坐标轴

直接上代码了,这里的一些函数用的是之前我自己封装的函数(包括attr的obj支持和节点数量和数据数量的自动匹配),若有不明白的,可以查看之前的博客: 页面的效果如下: 接下来继续添加坐标轴: 最终: 原文地址:https://www.cnblogs.com/eco-just/p/10014484.html

js正则表达式30分钟入门教程

2011-10-27 13:23:15 如何使用本教程 最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你 想像中的那么困难.当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的——我认为,没接触过正则表达式的人在看 完这篇教程后,能把提到过的语法记住80以上的可能性为零.这里只是让你明白基本的原理,以后你还需要多练习,