d3.js 封装一个方法更新柱状图，运用数据模板

<script>var width = 400;var height = 400;//创建画布var svg = d3.select('body').append('svg').attr('width',width).attr('height',height)var padding = {top:20,left:20,right:20,bottom:20}var rectstep = 35; //矩形的宽带偏白var rectwidth = 30;//矩形的宽var dataset = [216,86,158,76,203]// 根据数据填充矩形var rect = svg.selectAll('rect').data(dataset).enter().append('rect').attr('fill','steelblue').attr('x',function(d,i){return padding.left + i * rectstep;}).attr('y',function(d,i){return height - padding.bottom - d;}).attr('width',rectwidth).attr('height',function(d,i){return d;}) // 根据数据填充文本内容 var text = svg.selectAll('text').data(dataset).enter().append('text').attr('fill','white').attr('x',function(d,i){return padding.left + i * rectstep;}).attr('y',function(d,i){return height - padding.bottom - d;}).attr('text-anchor','middle') .attr('font-size','14px').attr('dx',rectwidth/2) .attr('dy','1em').text(function(d,i){return d;})function draw(){// 获取矩形的update部分var updateRect = svg.selectAll('rect').data(dataset);// 获取矩形的enter部分var enterRect = updateRect.enter();// 获取矩形的exit部分var exitRect = updateRect.exit();// update部分处理办法 updateRect.attr("fill","steelblue").attr("x",function(d,i){return padding.left + i * rectstep;}).attr("y",function(d,i){return height - padding.bottom - d;}).attr("width",rectwidth).attr("height",function(d,i){return d;})//enter部分处理办法 enterRect.append("rect").attr("fill","steelblue").attr("x",function(d,i){return padding.left + i * rectstep;}).attr("y",function(d,i){return height - padding.bottom - d;}).attr("width",rectwidth).attr("height",function(d,i){return d;}) // exit部分处理办法 exitRect.remove(); // 获取文本的update部分var updateText = svg.selectAll('text').data(dataset)// 获取文本的enter部分var enterText = updateText.enter();// 获取文本的exit部分var exitText = updateText.exit();// 文本update部分的处理办法 updateText.attr("fill","white") .attr("font-size","14px").attr("text-anchor","middle").attr("x",function(d,i){return padding.left + i * rectstep;}).attr("y",function(d,i){return height- padding.bottom - d;}).attr("dx",rectwidth/2) .attr("dy","1em").text(function(d,i){return d;});// 文本enter部分处理办法 enterText.append("text").attr("fill","white").attr("font-size","14px").attr("text-anchor","middle").attr("x",function(d,i){return padding.left + i * rectstep;}).attr("y",function(d,i){return height- padding.bottom - d;}).attr("dx",rectwidth/2) .attr("dy","1em").text(function(d,i){return d;}); // 文本exit部分的处理办法 exitText.remove();} </script><button onclick="mysort()">排序</button><button onclick="myadd()">增加数据</button><script>function mysort() {dataset.sort(d3.ascending);draw();}function myadd() {dataset.push( Math.floor(Math.random()*100));draw();}</script>

转载于:https://www.cnblogs.com/webmc/p/11076230.html

总结

以上是生活随笔为你收集整理的d3.js 封装一个方法更新柱状图，运用数据模板的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。