<!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>
