<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;})</script>

　　

?

轉載于:https://www.cnblogs.com/webmc/p/11064927.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的d3.js 简易柱形图，入门demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。