從這裡開始 我們就將開始畫一個簡單的圖表了 在此之前 ，最好掌握以下svg的基本知識。 一個間的的例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src ...
從這裡開始 我們就將開始畫一個簡單的圖表了
在此之前 ，最好掌握以下svg的基本知識。
一個間的的例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg width="100%" height="300"></svg> </body> <script> var data = [730,530,330,230,130]; var g = d3.select('svg')// 獲取svg .append('g')// 創建分組 .attr('transform','translate(30,30)');// 圖表距離視口的左、上距離 var rectHeight = 30;//設定矩形的高＋與下一個矩形的邊距 共30px g.selectAll('rect') .data(data) .enter() .append('rect')//利用enter 創建與數據個數一樣的rect矩形 .attr('x',0)//這裡設定矩形左上頂點的x值 .attr('y',function (d,i) { return rectHeight*i;//這裡設定矩形左上頂點的Y值 }) .attr('width',function (d,i) { return d;//矩形寬度 }) .attr('height',rectHeight - 5)//這裡矩形實際的高度就是25 與下一個矩形的邊距是5 .style('fill','pink');//填充色 </script> </html>
