D3js 获取X,Y轴坐标

D3js 获取X,Y轴坐标D3 就不多做介绍了,是一个非常强大的作图的工具。它到底怎么样,有多强大,看看官网d3js.org就知道了.参考地址:1.http://www.pkuwwt.tk/d3-tutorial-cn/about.html2.http://www.ourd3js.com/wordpress3.www.d3js.org要实现找到柱状图的X轴的坐标值,需要借助另外一个插

大家好,欢迎来到IT知识分享网。D3js

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 :

<!DOCTYPE html>
<meta charset="utf-8">
<style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: orange; } .bar:hover { fill: orangered ; } .x.axis path { display: none; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; } /* Style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } </style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script> var margin = {top: 40, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatPercent = d3.format(".0%"); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(formatPercent); var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { 
     return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span><br>"+ "<strong>letter:</strong><span style='color:red'>" + d.letter+ "</span>";
  })

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;
}

</script>

DATA.CSV

letter	frequency
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 = “<table style=’position:absolute; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; border:1px solid #888; background-color:#edf; text-align:center’><tr><td>事件ID</td><td>发送者</td><td>接收者</td><td>发生时间</td><td>源IP</td><td>目的IP</td><td>采集类型</td><td>攻击总数</td></tr>”;
            for(var i=0; i<data.length; i++){

                headers+=”<tr>”;
                headers+=”<td>”+data[i][“xxx”]+”</td>”;
                headers+=”<td>”+data[i][“UserName”]+”</td>”;
                headers+=”<td>”+data[i][“StandBy1″]+”</td>”;
                headers+=”<td>”+data[i][“OccurTimeHour”]+”</td>”;
                headers+=”<td>”+data[i][“SrcIP”]+”</td>”;
                headers+=”<td>”+data[i][“DestIP”]+”</td>”;
                headers+=”<td>”+data[i][“CollectType”]+”</td>”;        
                headers+=”<td>”+data[i][“total”]+”</td>”;                        
                headers+=”</tr>”;
            }
            headers+=”</table>”;
            //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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/21797.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信