circle and bar 

<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>D3 tutorial</title>
<!--
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-->
<script src="d3.min.js" charset="utf-8"></script> 

<style type="text/css">
div.chart{
font-family:sans-serif;
font-size:0.7em;
}
div.bar {
background-color:#a3b466;
color:white;
height:2em;
line-height:2em;
padding-right:1em;
margin-left:22em;
margin-top:5px;
margin-bottom:2px;
text-align:right;
}

div.label {
background-color:#c364a7;
color:white;
height:2em;
line-height:2em;
padding-right:1em;
margin-bottom:2px;
float:left;
width:20em;
text-align:right;
}

</style>
</head> 
<body>

<p> p </p>


<script > 
  



var  data=[{
"count": 2677.09756097561,
"id": 1,
"name": "Robert F. Kennedy Bridge Bronx Plaza"
},
{
"count": 260,
"id": 2,
"name": "Bridge    "
},
{
"count": 800,
"id": 3,
"name": " Bronx Plaza"
},
{
"count": 2000,
"id": 4,
"name": " Plaza"
},
];

d3.select("body")
.append("div")
.attr("class", "chart")
.selectAll("div.line")
.data(data)
.enter()
.append("div")
.attr("class","line");

d3.selectAll("div.line")
.append("div")
.attr("class","label")
.text(function(d){return d.name});

d3.selectAll("div.line")
.append("div")
.attr("class","bar")
.style("width", function(d){return d.count/10 + "px"})
.text(function(d){return Math.round(d.count)});
 

 // circle
 
 //圆心x坐标  cy圆心y坐标   r半径
var  datacircle=[
{
"cx": 10,
"cy": 20,
"r": 10,
"stroke":"orange",
"color":"#c364a7"
},

{
"cx": 10,
"cy": 50,
"r": 10,
"stroke":"orange",
"color":"#c364a7"
},

{
"cx": 10,
"cy": 80,
"r": 10,
"stroke":"orange",
"color":"purple"
},
 
];

 
var margin = 50,
width = 700,
height = 300;

d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.selectAll("circle")
.data(datacircle)
.enter()
.append("circle");

d3.selectAll("circle")
.attr("cx", function(d,i) {    return d.cx+i*30;    })
.attr("cy", function(d,i) {    return d.cy+i*50;    })
.attr("r", function(d,i) {    return d.r+i*16;    })
.attr("stroke", function(d) {    return d.stroke;    })
.style("fill", function(d) { return d.color; });
  

</script>




</body> 
</html>

 

posted on 2015-11-18 08:41  rojas  阅读(165)  评论(0)    收藏  举报