html x y轴坐标,D3js 获取X,Y轴坐标

D3 就不多做介绍了，是一个非常强大的作图的工具。它到底怎么样，有多强大，看看官网d3js.org 就知道了.

参考地址：

1. http://www.pkuwwt.tk/d3-tutorial-cn/about.html

2. http://www.ourd3js.com/wordpress

3. www.d3js.org

要实现找到柱状图的X轴的坐标值，需要借助另外一个插件： Tip

主要 codes :

:" + d.+ "";

})

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

svg.call(tip);

d3.tsv("DATA.CSV", type, function(error, data) {

x.domain(data.map(function(d) { return d.letter; }));

y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("transform", "rotate(-90)")

.attr("y", 6)

.attr("dy", ".71em")

.style("text-anchor", "end")

.text("Frequency");

svg.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class", "bar")

.attr("x", function(d) { return x(d.letter); })

.attr("width", x.rangeBand())

.attr("y", function(d) { return y(d.frequency); })

.attr("height", function(d) { return height - y(d.frequency); })

.on('mouseover', tip.show)

.on('mouseout', tip.hide)

.on('click',showTip);

});

function type(d) {

d.frequency = +d.frequency;

return d;

}

letterfrequency

A.08167

B.01492

C.02780

D.04253

E.12702

F.02288

G.02022

H.06094

I.06973

J.00153

K.00747

L.04025

M.02517

N.06749

O.07507

P.01929

Q.00098

R.05987

S.06333

T.09056

U.02758

V.01037

W.02465

X.00150

Y.01971

Z.00074 如此就可以得到坐标轴上的X,Y的值了。

添加一个 click 函数，函数的使用在选择 selectAll 方法中去找寻, selectAll 方法用来做条件的筛选工作：

function showTip(d) {

var srcIP = d.SrcIP;

alert("srcIP ="+srcIP+",cid="+cid+",lid="+lid);

handleRequest("/impala/impala/data?cid=" + cid + "&lid=" + lid + "&selection=" + srcIP,

function(headers, data) {

var headers = "

事件ID

发送者

接收者

发生时间

源IP

目的IP

采集类型

攻击总数

for(var i=0; i

headers+="

";

headers+="

"+data[i]["xxx"]+"";

headers+="

"+data[i]["UserName"]+"";

headers+="

"+data[i]["StandBy1"]+"";

headers+="

"+data[i]["OccurTimeHour"]+"";

headers+="

"+data[i]["SrcIP"]+"";

headers+="

"+data[i]["DestIP"]+"";

headers+="

"+data[i]["CollectType"]+"";

headers+="

"+data[i]["total"]+"";

headers+="

";

}

headers+="

";

//show.

$("#dataShow").css("display","block").append(headers);

}, function(error) {

alert(error);

});

}

ajax 函数：handleRequest

function handleRequest(uri, successCallback, errorCallback) {

$.ajax({

type : "GET",

url : uri,

dataType : 'json',

success : function(result) {

var arr = eval(result);

var headers = arr[0];

var data = arr[1];

successCallback(headers, data);

},

error : function(xmlHttpRequest, textStatus, errorThrown) {

errorCallback(errorThrown);

}

});

}

如此活动D3 的 X,Y  的值就可以很容易了。

下载源码：http://download.csdn.net/detail/supingemail/8908815