首頁 > 開發者 > JavaScript
標籤：
D3（Data-Driven Documents）是一個用於網頁作圖、產生互動圖形的JavaScript函數庫。
官網：http://d3js.org/
下載：
cdn:<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>d3.zip
1.hello world
d3.select(‘body‘) //選擇body元素 .append(‘p‘).text(‘hello world‘); //建立p元素,innerText=‘hello world‘
2.data
<p>1</p> <script> var arr = [1, 2, 3, 7, 6, 5]; var d = d3.select(‘body‘) //選擇body .selectAll(‘p‘).data(arr).enter() //選擇所有p元素 傳入資料 產生一個對象，update屬性是一個數組和傳入資料元素個數相同 .append(‘p‘); //迴圈傳入資料元素個數多出的次數（這裡是6-1次） d.text(function (v, i) { //v代表value i代表index return v; }).style(‘color‘, function (v) { if (v > 4) return ‘red‘; return ‘blue‘; }); </script>
3.div橫條圖
<style> .bar { display: inline-block; width: 20px; margin-right: 2px; background-color: teal; } </style></head><body> <script> var arr = [10, 20, 30, 70, 60, 50]; var d = d3.select(‘body‘) .selectAll(‘p‘).data(arr).enter() .append(‘div‘); d.attr(‘class‘, ‘bar‘) .style(‘height‘, function (v) { return v*5 + ‘px‘; }); </script></body>
4.svg
SVG標籤包含一些視覺元素，包括矩形，圓形，橢圓形，線條，文字和路徑等。基於像素的座標系統，其中瀏覽器的左上方是原點(0,0)。x,y的正方向分別是右和下。
svg：<svg width="500" height="200"/>
矩形：<rect x="0" y="0" width="500" height="50"/>
圓形：<circle cx="0" cy="0" r="10"/> cx，cy是圓心座標，r是半徑
橢圓形：<ellipse cx="0" cy="0" rx="100" ry="100"/> cx，cy是一個點的座標，rx，ry是另一個點的座標。
線條：<line x1="0" y1="0" x2="100" y2="100" stroke="b??lack"/> x1,y1是一個點的座標，x2,y2是另一個點的座標。stroke指定描邊使得線是可見的
5.rect橫條圖
<script> //data var arr = []; for (var i = 0; i < 20; i++) { var temp = Math.random() * 30; arr.push(Math.round(temp)); //產生30以內的整數 } //svg var w = 600; var h = 100; var pad = 2; var svg = d3.select(‘body‘).append(‘svg‘).attr(‘width‘, w).attr(‘height‘, h); //rect var rects = svg.selectAll(‘rect‘).data(arr).enter().append(‘rect‘); rects.attr(‘x‘, function (v, i) { return (w / (arr.length)) * i; }) //svg width除以元素個數 .attr(‘y‘, function (v, i) { return h - v * 3; }) //x、y軸分別在右，下為正方向 .attr(‘width‘, function (v, i) { return w / arr.length - pad; }) //x座標-pad .attr(‘height‘, function (v, i) { return v * 3 }) .attr(‘fill‘, function (v, i) { return ‘rgb(0,0,‘ + (255 - v) + ‘)‘ }); //text var texts = svg.selectAll(‘text‘).data(arr) .enter() .append("text") .text(function (d) { return d; }) .attr("text-anchor", "middle") .attr("x", function (d, i) { return i * (w / arr.length) + (w / arr.length - pad) / 2; }) .attr("y", function (d) { return h - (d * 3) + 11; //字型高度 }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); </script>
6.比例尺
<script> var arr = [[1, 2], [3, 1], [4, 5]]; d3.max(arr); //預設比較第一個元素 d3.max(arr, function (temp) { return temp[1]; //設定比較第二個元素 }); //比例尺 var s = d3.scale.linear() .domain([0, 20]) //源目標範圍 .range([0, 100]); //顯示值範圍 </script>
7.座標軸
<svg id="svg" width="1000" height="100"></svg> <script> //data var arr = []; for (var i = 0; i < 5; i++) { var temp = Math.random() * 30; arr.push(Math.round(temp)); //產生30以內的整數 } //比例尺 var s = d3.scale.linear().domain([0, d3.max(arr)]).range([0, 1000]); //axis var axis = d3.svg.axis().scale(s).orient(‘bottom‘); //繪製座標軸 var svg = d3.select(‘svg‘); svg.append(‘g‘).call(axis); </script>
8.自己封裝的單直條圖
createZXT（）
function createZXT(svg, arr, colorFn) { var svg = svg ? svg : d3.select(‘body‘).append(‘svg‘).attr(‘width‘, 500).attr(‘height‘, 100); var arr = arr ? arr : function () { var arr = []; for (var i = 0; i < 10; i++) { var temp = Math.random() * 30; arr.push(Math.round(temp)); //產生30以內的整數 } return arr; }(); var w = svg.attr(‘width‘), h = svg.attr(‘height‘); var pad = 2; var yScale = d3.scale.linear().domain([0, d3.max(arr)]).range([0, h]); var rects = svg.selectAll(‘rect‘).data(arr).enter().append(‘rect‘); rects.attr(‘x‘, function (v, i) { return (w / (arr.length)) * i; }) .attr(‘y‘, function (v, i) { return h - yScale(v); }) .attr(‘width‘, function (v, i) { return w / arr.length - pad; }) .attr(‘height‘, function (v, i) { return yScale(v); }) .attr(‘fill‘, function (v, i) { return colorFn ? colorFn(v, i) : ‘rgb(0,0,‘ + (255 - v) + ‘)‘ }); var texts = svg.selectAll(‘text‘).data(arr) .enter() .append("text") .text(function (d) { return d; }) .attr("text-anchor", "middle") .attr("x", function (d, i) { return i * (w / arr.length) + (w / arr.length - pad) / 2; }) .attr("y", function (v) { return h - yScale(v) + 11; //字型高度 }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); }
調用：
//arr var arr = []; for (var i = 0; i < 15; i++) { var temp = Math.random() * 255; arr.push(Math.round(temp)); } var svg = d3.select(‘svg‘); createZXT(svg, arr, function (v) { //傳入顏色函數 return ‘rgb(‘ + (255 - v) + ‘,0,0)‘; }) createZXT(svg, arr) //傳入svg畫布,和資料 //函數內部,已處理畫布大小和資料的比例尺
9.自己封裝的雙直條圖
function creatDB(option) { if (!option) return; if (!option.container || !option.svgw || !option.svgh || !option.xarr || !option.arr1 || !option.arr2) return; var svg = d3.select(‘#‘ + option.container).append(‘svg‘) .attr(‘width‘, option.svgw) .attr(‘height‘, option.svgh); //#region 座標軸 //比例尺 var xScale = d3.scale.linear().domain([0, option.xarr.length]).range([0, option.svgw]); //axis var axis = d3.svg.axis().scale(xScale).orient(‘bottom‘).ticks(option.xarr.length); //繪製座標軸 svg.append("g") .attr("class", "axis") .attr("transform", "translate(30,50)") .call(axis); //比例尺 var max1 = d3.max(option.arr1); var max2 = d3.max(option.arr2); var maxV = max1 > max2 ? max1 : max2; var yScale = d3.scale.linear().domain([0, maxV]).range([option.svgh, 0]); //axis var ayis = d3.svg.axis().scale(yScale).orient(‘left‘); //繪製座標軸 svg.append("g") .attr("class", "axis") .attr("transform", "translate(30,50)") .call(ayis); //#endregion 座標軸 var aw = option.svgw / option.xarr.length; var newArr = []; for (var i = 0; i < arr1.length; i++) { newArr.push(arr1[i]); newArr.push(arr2[i]); } svg.selectAll(‘rect‘).data(newArr).enter().append(‘rect‘) .attr(‘x‘, function (v, i) { return aw / 2 * i; }) .attr(‘y‘, function (v,i) { return option.svgh - v*10; }) .attr(‘width‘, aw / 2) .attr(‘height‘, function (v, i) { return v * 10; }) .attr(‘fill‘, function (v,i) { return i % 2 == 0 ? ‘blue‘ : ‘red‘; }); }
相容性問題：
SVG技術不能相容IE8及更低版本的IE瀏覽器。如果想要IE8使用d3，請用r2d3.js（一個結合了 Raphael.js的擴充庫，用VML解決）
<!--[if lte IE 8]><script src="r2d3.js" charset="utf-8"></script><![endif]--> <!--[if gte IE 9]><!--> <script src="d3.js"></script>
d3 selector對象支援的方法
參考：
http://www.bootcdn.cn/r2d3/
http://blog.csdn.net/tianxuzhang/article/category/1623437
http://www.ourd3js.com/wordpress/?p=396
待續
[JS] JavaScript架構(2) D3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
