js怎么获取x轴和y轴的数据

JavaScript014

js怎么获取x轴和y轴的数据,第1张

function mousePosition(evt){

evt = evt || window.event

//Mozilla 

if(evt.pageX || evt.pageY){

return { x : evt.pageX,y : evt.pageY}

}

//IE 

return {

x : evt.clientX + document.body.scrollLeft - document.body.clientLeft,

y : evt.clientY + document.body.scrollTop - document.body.clientTop

}

}

//获取X轴坐标 

function getX(evt){

evt = evt || window.event

return mousePosition(evt).x

}

//获取Y轴坐标 

function getY(evt){

evt = evt || window.event

return mousePosition(evt).y

}

//外部函数调用1 

document.getElementById("x").onclick = function(evt){

alert(getX(evt))

}

//外部函数调用2 

function showXY(evt){

evt = evt || window.event

document.getElementById("n").innerHTML = ""+getX(evt)

}

window.onload = function(){

document.body.onmousemove = showXY

}

1.在IE中,event对象是全局的,它被存储在window.event中,对于Firefox,及其他的浏览器来说,这个事件将被传递到任何指向这个页面动作的函数中。可以通过传递参数获取。

2.document.body.scrollTop是网页被卷去的高,具有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop ,否则取不到值。

3.Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500*500的窗口,并且鼠标位于窗口中间,那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素,pageY的值为750。    如此相反的是,微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置,而不是当前document文档。在相同的例子中,如果将鼠标放置于500*500窗口的中间,clientX和clientY值将均为250。如果向下滚动页面,clientY将仍为250,因为它是相对于window窗口来测量,而不是当前的document文档。因此,在鼠标位置中,我们应该引入document文档body区域的scrollLeft和scrollTop属性。最后,IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和document.body.clientTop包含了这个边框的宽度。所有用

evt.clientX + document.body.scrollLeft - document.body.clientLeft 

//在IE中获得

这里讲一下怎么样用d3.js,输入一个数据list,根据数据画一个带有坐标轴的简单直方图.

以下是目标效果.

引入d3.

<script src="//d3js.org/d3.v4.min.js"></script>

画矢量图需要画布,首先,创建新svg:

我的数据为一个数组: var dataset = [ 25, 6, 21 , 17 , 13 , 9, 6, 2, 20 ]

我想让我的直方图向右,纵向排列.

每一个矩形的x向长度既表示了数据的大小.

那么第一个要解决的问题就是,怎么把原始数据换算成像素,肯定不能直接画25px,6px...

这个时候就需要一个比例尺了.

d3提供的 连续比例尺 可以这么写:

定义变量linear为一个连续比例尺,定义域.domain,值域.range.

在这里,定义域 .domain([0, d3.max(dataset)])是指,我比例尺输入的数据最小为0,最大是原dataset里最大的那个数(25),所以输入比例尺的定义域为0到25,换算后的值域为0到400px,既——数据0对应0px,数据25对应400px.

有了长度比例尺,就可以画直方图了.

在这里,先定义了每一个矩形框框的高度为30px,

.data() 绑定数据dataset

.enter() 方法是专门用在这种,根据输入数据动态新建元素的情况下的,具体可以参考 官方说明 :

所以,在这里,我们既是根据输入 dataset 来新建 <rect>,

怎么根据呢?

属性设置里面:

表示的是,对于每一个新建的矩形 <rect>,x坐标为0,y坐标为序号*矩形高度+5px. (5px是矩形之间的空格)

可以理解为,在(0,0)放置一个高度为30px的矩形,再在(0,35)放一个,再在(0,70)放一个,再在(0,105)放一个...

而矩形的宽度要和我们的数据保持一致,所以width属性,输入了一个无名函数

这个函数是什么意思呢,当选择集需要使用被绑定的数据时,常需要这么使用。其包含两个参数,其中:

有了直方图的矩形,我们现在来画一个 坐标轴 .

坐标轴有4种:

分别是什么样子的呢,我们来试一试.

在API使用规范里这样写到:

意思是,在使用坐标轴的时候,必须先添加一个 <g>元素,再 .call(axis) 调用axis. 而默认坐标轴都是从原点(0,0)开始画,如果需要调整位置,在属性 transform 里设置 translate(x,y)

所以,我们测试一下在(30,30)画一个 axisTop .

我们得到结果如下:

而每个坐标轴是由哪些部分组成的呢:

除此之外,我们还可以改样式.

我们知道了每一个坐标轴有一个 <path class="domain>,我们可以试试更改样式.

而且在每一个 <g class="tick">内部,有一个 <line>和一个 <text>.

<line>,这两个元素的可用属性可以参考 line , text

最终,实现效果: