基于柱形图的简单交互操作
最近一段时间的D3学习全部是基于http://www.ourd3js.com/wordpress/
这个网站的,版权全部归上述网站所有,我就不每次都强调一遍了。
前两天刚看了一个js讲动画的视频,今天正好用上,好开森~
内容比较好理解,直接上代码啦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3:交互式学习简单例子</title>
<style type="text/css">
.axis path,
.axis line {
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<script type="text/javascript" src="../d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var height = 400,
width = 400;
var dataset = [13, 19, 47, 89, 32, 10];
var padding = {left:20, right:20, top:30, bottom:30};
var svg = d3.select("body")
.append("svg")
.attr("height", height)
.attr("width", width);
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {return d;})])
.range([height - padding.top - padding.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var rectPadding = 4;
var rects = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {return xScale(i) + (rectPadding / 2);})
.attr("y", function (d) {return yScale(d);})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("height", function (d) {return height - padding.top - padding.bottom - yScale(d);})
.style("fill","blue")
.on("mouseover", function (d,i) {d3.select(this).style("fill", "yellow")})
.on("mouseout", function (d, i) {
d3.select(this)
.transition()
.duration(500)
.style("fill", "blue");
});
var texts = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d,i) {return xScale(i) + (rectPadding / 2);})
.attr("y", function (d) {return yScale(d);})
.attr("dx",(xScale.rangeBand() - rectPadding) / 2)
.attr("dy", 18)
.style("fill", "white")
.style("text-anchor", "middle")
.text(function (d) {return d;});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>