D3, Bubble Sample

最新推荐文章于 2019-03-05 21:04:00 发布

solaris_navi

最新推荐文章于 2019-03-05 21:04:00 发布

阅读量1k

点赞数

分类专栏： Database Java RESTful WEB 文章标签： function xmlhttprequest javascript hierarchy null sql

本文链接：https://blog.csdn.net/solaris_navi/article/details/7475773

版权

Java 同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

WEB

15 篇文章 0 订阅

订阅专栏

Database

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="d3js/d3.v2.min.js"></script>
<script type="text/javascript">

var svggraph;
var divgraph;
var svgwidth = 960;
var svgheight = 960;

function init()
{
	svggraph= d3.select("#graphdiv")
	 .append("svg")
	 .attr("width", svgwidth)
	 .attr("height", svgheight);
	
	divgraph= d3.select("#graphdiv");
}

var jsonendpoint = "/tryrest/contact/list/json";

function xmlhttpPost() {
	
	var xhr;
	var method = "GET";
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xhr = new XMLHttpRequest();
	  	if ("withCredentials" in xhr)
	  	{ 	    
        	xhr.open(method,jsonendpoint,true);

	    } 
	    else if (typeof XDomainRequest != "undefined")
	    {
	        //xhr = new XDomainRequest();
	        xhr=new ActiveXObject("Microsoft.XMLHTTP");
	        xhr.open(method,jsonendpoint);
	    } else {
	        xhr = null;
	    }
	}
	else
	{// code for IE6, IE5
	  	xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xhr.onreadystatechange=function()
	{
	    if (xhr.readyState == 4)
	    {
	    	document.getElementById("maindiv").innerHTML = xhr.responseText;
	    }
	};
	xhr.setRequestHeader("Content-type", "application/json");
	xhr.send(/*"condition="+document.getElementById("sql_condition").value*/);	
}

function show()
{
	document.getElementById("maindiv").innerHTML = "lala";
}

var r = 960, format = d3.format(",d"), fill = d3.scale.category20c();
	
function drawMyGraph()
{
 	var bubble = d3.layout.pack()
			      .sort(null)
			      .size([r, r]);

	var svggraph_b = svggraph.attr("class", "bubble");
	
	d3.json(jsonendpoint, function(json)
	{	   
		 var node = svggraph_b.selectAll("g.node")
		        .data(bubble.nodes(classes(json))
		        		.filter(function(d) { return !d.contactInfoHana; }))
		        .enter().append("g")
		        .attr("class", "node")
		        .attr("transform", function(d) { return "translate(" + d.gx + "," + d.gy + ")"; });
		
		 node.append("circle")
		        .attr("r", function(d){return d.age;})
		        .style("fill", function(d) {return d.gcol;})
		        .style("fill-opacity",".3");
		 
		 node.append("text")
		        .attr("text-anchor", "middle")
		        .style("fill","white")
		        .text(function(d) { return d.name; });
		 
	});
	
}

 // Returns a flattened hierarchy containing all leaf nodes under the root.
 function classes(root) {
   var classes = [];
 
   function recurse(name, node) {
     if (node.contactInfoHana) 
   	 { 
    	 node.contactInfoHana.forEach(function(child) { recurse(node.name, child); });
   	 }
     else 
     {
    	 var rm1=Math.floor(Math.random()*r);
         var rm2=Math.floor(Math.random()*r);
         
         var rcol;
         
         if(node.gender == "Male")
         	 rcol = "blue";
         else
        	 rcol = "red";
         
    	 classes.push({gx: rm1, gy: rm2, age: node.age, name: node.name, gcol: rcol});
    	
    	 console.log(node.name + "," + node.age + "," + rm1 + "," + rcol);
     }
    	      
   }
 
   recurse(null, root);
   return {children: classes};
 }
</script>
	
</head>
<body οnlοad="javascript:init()">

	<input size="100" id="sql_condition" name="sql_condition" />
	<button οnclick='javascript:xmlhttpPost()'>Execute Query</button>
	<button οnclick='javascript:drawMyGraph()'>Execute Graph</button>
	
	<div id="graphdiv"></div>
	<div id="maindiv"></div>
</body>
</html>

solaris_navi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3, Bubble Sample

var svggraph;var divgraph;var svgwidth = 960;var svgheight = 960;function init(){ svggraph= d3.select("#graphdiv") .append("svg") .attr("width", svgwidth) .attr("height", svgheight); d
复制链接

扫一扫

专栏目录