一个动态的星条图
style="width: 100%; height: 300px" src="http://sandbox.runjs.cn/show/yjsoswps" allowfullscreen="allowfullscreen" frameborder="0">
以下是源码。
<!DOCTYPE html>
<html>
<head>
<title>d3 library example for scatter chart</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name=description content="this is an d3 library example template">
<meta name=viewport content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
#tooltip{
position: absolute;
width: 200px;
height: auto;
padding:10px;
background-color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
-moz-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
pointer-events:none;
}
#tooltip.hidden{
display: none;
}
#tooltip p{
margin:0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
/* rect:hover{
fill:orange;
-moz-transition:all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
} */
</style>
</head>
<body>
<script type="text/javascript">
var w = this.window.innerWidth;
var h = this.window.innerHeight / 2;
var barPandding = 1;
var dataset=[
{key: 0, value: 5},
{key: 1, value: 10},
{key: 2, value: 13},
{key: 3, value: 19},
{key: 4, value: 21},
{key: 5, value: 25},
{key: 6, value: 22},
{key: 7, value: 18},
{key: 8, value: 15},
{key: 9, value: 13},
{key: 10, value: 11},
{key: 11, value: 12},
{key: 12, value: 15},
{key: 13, value: 20},
{key: 14, value: 18},
{key: 15, value: 17},
{key: 16, value: 16},
{key: 17, value: 18},
{key: 18, value: 23},
{key: 19, value: 25},
{key: 20, value: 13},
{key: 21, value: 19},
{key: 22, value: 21},
{key: 23, value: 25},
{key: 24, value: 22},
{key: 25, value: 18},
{key: 26, value: 15},
{key: 27, value: 13},
{key: 28, value: 11},
{key: 29, value: 12},
{key: 30, value: 15},
{key: 31, value: 20},
{key: 32, value: 18},
{key: 33, value: 17},
{key: 34, value: 16},
{key: 35, value: 18},
{key: 36, value: 13},
{key: 37, value: 19},
{key: 38, value: 21},
{key: 39, value: 25},
{key: 40, value: 22},
{key: 41, value: 18},
{key: 42, value: 15},
{key: 43, value: 13},
{key: 44, value: 11},
{key: 45, value: 12},
{key: 46, value: 15},
{key: 47, value: 20},
{key: 48, value: 18},
{key: 49, value: 17},
{key: 50, value: 16},
{key: 51, value: 18},
{key: 52, value: 13},
{key: 53, value: 19},
{key: 54, value: 21}
];
var key = function(d){
return d.key;
};
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.05);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d){
return d.value;
})])
.range([0,h*0.75]);
//创建svg
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
//创建条形图
var bar = svg.selectAll("rect")
.data(dataset,key)
.enter()
.append("rect")
.attr("x",function(d,i){
return xScale(i);
})
.attr("y",function(d){
return h- yScale(d.value);
})
.attr("width",xScale.rangeBand())
.attr("height",function(d){
return yScale(d.value);
})
.attr("fill",function(d){
return "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 255)+","+(d.value*10)+")";
})
.on("mouseover",function(d){
d3.select(this)
.attr("fill","orange");
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() /2;
var yPosition = parseFloat(d3.select(this).attr("y")) /2 + h/2;
d3.select("#tooltip")
.style("left",xPosition + "px")
.style("top",yPosition +"px")
.select("#value")
.text(d.value);
d3.select("#tooltip").classed("hidden",false);
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(500)
.attr("fill",function(d){
return "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 255)+","+(d.value*10)+")";
});
d3.select("#tooltip").classed("hidden",true);
})
.on("click",function () {
// 新数据集
var numValues = dataset.length;
var minkey = dataset[0].key;
var maxkey = dataset[dataset.length-1].key;
dataset = [];
for (var i = minkey; i <= maxkey; i++) {
var newNumber = Math.floor(Math.random() * 21 + 5);
var k = i;
/*console.log(k)*/
var v =