最近项目组加班比较严重,D3的博客就一拖再拖,今天终于不用加班了,赶紧抽点时间写完~~
今天就将D3数据的更新及动画写一写~~
接着之前的博客写~~
之前写了一个散点图的例子,下面可以自己写一个柱状图的例子。
我就直接给代码了,和散点图差不多~~
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 8, 10, 13, 19, 21, 25, 22, 18, 15, 13]; // 使用了d3.scale.ordinal() 它支持范围分档。与定量比例尺(如d3.scale.linear())返回连续的范围值不同,序数比例尺使用的是离散范围值,也就是输出值是事先就确定好的。 // 映射范围时,可以使用range(),也可以使用rangeBands()。后者接收一个最小值和一个最大值,然后根据输入值域的长度自动将其切分成相等的块或“档”。0.2也就是档间距为每一档宽度的20%。 var x = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeBands([0, width], 0.2); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d; })]) .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll("rect")// 插入的不是circle了,改为rect .data(dataset) .enter() .append("rect") .attr("x", function(d,i) { return x(i); }) .attr("y", function(d) { return y(d); }) .attr("width", x.rangeBand()) .attr("height", function(d) { return height - y(d); }) .attr("fill", function(d){ return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色 }); svg.append("g") .attr("class", "x axis") .attr("transform",