º¶ > §Þ³N½×¾Â
ªì±´D3.js ¢w ¸ê®Æµøı¤Æªº§Q¾¹
D3.js(Data-Driven Document)·Ó¨ä¦r±·N«ä´N¬O¥Hdata drivenªº¤è¦¡¦bºô¶¤W°ÊºA¦a¾Þ§@DOM(Document Object Model)¡C´£¨ìDOMªº¾Þ§@¡A·|Åý§ÚÌÁp·Q¨ì¥t¤@®Mª¾¦WJavaScript¨ç¦¡®wjQuery¡AD3.js©MjQuery¦³«Ü¦h¬Û¦üªº¦a¤è¡A¤ñ°_jQuery¼sªx©ÊÀ³¥Î¡AD3.js«h¬O±Mª`¦b¸ê®Æµøı¤Æªº§e²{¡A¨ä¤¤¤@Óì¦]¦b©óD3.jsì¥Í¤ä´©SVG¦V¶q¦¡¹Ï§Î¡ASVG¥i¥H§ó¦³®Ä²v©óºô¶¤W¦s©ñ¹Ï§Î¡C¦ý¦´ÁHTML¥»¨¨Ã¤£¤ä´©SVG®æ¦¡(ª½¨ìHTML5)¡A¦]¦¹¹L¥hYn¨Ï¥ÎSVG¡A³£n¨Ï¥ÎÃB¥~ªº®M¥ó¡C¦ÓD3.jsì¥Í»yªk¤ä´©SVG¡A¥i¥H§ó¦³®Ä²v¦a°ÊºA³B²z¹Ï§Î¡A©Ò¥H¤]¦³¤HºÙD3.js¬°jQueryªºSVGª©¡C
¹Ï¤@¡BData-Driven Documents (from https://d3js.org/)
¦ÓD3.js¥t¤@Ó»PjQuery¤£¦Pªº¦a¤è¦b©ó¡AD3.js§Q¥Îdata drivenªº¤è¦¡¥i¥H§ó¦³®Ä²vªº³B²zdata¡CYn±N¤j¶qªº¸ê®Æ¦s©ñ¦bDOM¸Ì¡A¹L¥h§ÚÌ·|¥Î°j°éªº¤è¦¡¨Ó§å¦¸³B²z¸ê®Æ¡A¦ÓD3.js«h¬O§Q¥Îì¥Íªº¨ç¦¡¡A¥i¥H§ó¦³®Ä²v¦a³B²z¤j¶qªº¸ê®Æ¡CÁ|¨Ò¨Ó»¡¡An±N¤@µ§°}¦C¸ê®ÆmyData=[ 1, 2, 3, 4, 5, ¡K ]¼g¨ìºô¶¤W¡A§ÚÌ¥i¥H©w¸q¦n¹w³]ªº¼ÐÅÒ(¨Ò¦p<div>)¡AµM«á¨Ï¥Îdocument.getElementsByTagName("div")ªº«ü¥O¡A¦A¥Î(for©Meach)¨Ó³B²z¸ê®Æ¡C¦Ó¦bD3.js¤£»Ýn¨Æ¥ý©w¸q¦nªº¼ÐÅÒ¡A¥u»ÝnselectAll("div")©Mdata(mydata)¡A§Y·|°ÊºA¦a¼W¥[©Î½s¿è¦¹¼ÐÅÒ¤º®e¡C¦p¦¹¤@¨ÓÅýµ{¦¡¦³§ó¦hªº¼u©Ê¡A¨Ã¥B¯à°ÊºA¦a§Y®É¦a§@¥X¤ÏÀ³¡A³o¬OD3.jsªº¨ä¤¤¤@ÓÀuÂI¡C¦p¹Ï¤G©Ò¥Ü¡AD3¹ê§@°j°éªº¼gªk¡A¨Ï±o§ÚÌ¥un¨Ï¥ÎselectAllªº¤èªk§Y¥i¹F¨ì³]©w¼ÐÅÒªº¤º®e¡C
¹Ï¤G¡B¤ñ¸û¤£¦PªºSelector¤èªk(from https://d3js.org/)
¤G¡B¹ê§@D3.jsªº²Ä¤@Ó¨Ò¤l
D3.js¬°JavaScriptªºÂX¥R¨ç¦¡®w¡A¥B¥Ø«eÂsÄý¾¹³£¬Û®eJavaScriptªº»yªk¡A¦]¦¹¥un¸ü¤JD3.jsªº¨ç¦¡®w¡A´N¥i¥H¦bºô¶¤W¾Þ§@D3.js¡Cº¥ý¡A§ÚÌ¥ý¥hD3.js©xºô¡A¤U¸ü³Ì·sªº¨ç¦¡®w¡A¦ý¬°¤Fª©¥»§ó·sªº°ÝÃD¡A¤@¯ë«Øij¨Ï¥Î¶W³sµ²¸ü¤J¨ç¦¡®w¡A¨ä¤èªk¦p¤U¡C
<script src=https://d3js.org/d3.v3.min.js charset="utf-8"></script>
±µ¤U¨Ó¬°¤F¹ê»Ú¥ÎconsoleºÝ¾Þ§@½d¨Ò¡A¥ý«Ø¤@ӪŪºhtmlÀɨӽm²ß¡C¨ä¤º®e¦p¤U¡A¨ä¤¤¥[¤J¤FD3.jsªº³sµ²¡C
<!DOCTYPE html>
<html>
<head>
<script src=https://d3js.org/d3.v3.min.js charset="utf-8"></script>
<title>D3.js Demo </title>
</head>
<body>
</body>
</html>
¥Î°O¨Æ¥»¶}±ÒªÅªº¤å¥ó¡A¶ñ¤J¤Wz¤º®e¡A¨Ã¦s¦¨demo.html¡A±µµÛ¥ÎÂsÄý¾¹¶}±Ò(¥»¥Ü½d¥ÎChrome¾Þ§@)³oӪŪºdemo.html¡C¦]¬°¨S¦³¥[¤Jµ{¦¡½X¡A¦¹®ÉÂsÄý¾¹Åã¥Ü¬°ªÅ¡C¶}±Ò«á¥ÎF12¡A¶i¤Jconsole¼Ò¦¡¡A¦pªG¤w¸g¦¨¥\¸ü¤JD3.js¡A«h¦bconsole¿é¤Jd3. ¡A´N¯à§Q¥ÎIntelliSense¦Û°Ê±a¥X¨ç¦¡¡A¨äµ²ªG¦p¹Ï¤T©Ò¥Ü¡C
¹Ï¤T¡B¨Ï¥ÎChrome ªºConsole½T»{D3.js¤w¥¿½T¸ü¤J¡C
½T©wÂsÄý¾¹¥¿½T¸ü¤JD3.js¨ç¦¡«á¡A§Ú̲{¦b¨Ó°ÊºA·s¼W¤¸¥ó¡CÁ|¨Ò¨Ó»¡¡A§ÚÌn¦bºô¶¤W·s¼W5Ó<div>¤¸¥ó¡A¨C¤@Ó¤¸¥ó¥H½s¸¹¨Óªí¥Ü¡C
¨äµ{¦¡½X¦p¤U¡G
var myData = [1,2,3,4,5];
d3.select('body')
.selectAll('div')
.data(myData)
.enter()
.append('div')
.text(function(d){return d;});
²³æ¤¶²Ð¤@¤U¤Wzªºµ{¦¡½X¡G
ƒÜ myData¬O§Ú̦ۦæ©w¸qªº°}¦C¡A§Æ±æ§â¥¦Åã¥Ü¦bºô¶¤W¡C
ƒÜ selectAll¬O¿ï¨úºô¶¤W©Ò¦³ªº
¡@data(myData)¬O¥Î¨Ó¸j©w¤w³]©wªº¸ê®Æ¡C
¡@enter()¬O¥Î¨Ó¤ñ¹ï¥Ø«eºô¶¤¤©Ò¦³<div>ªº¤¸¯À¡AY<div>ªº¤¸¯À¶q¤ñ¸ê®Æ¤Ö®É¡A´N·|·s¼W(³o¨ä¤¤ì²z¤U¤@¸`·|µÛ«»¡©ú)¡C
¡@append('div')«h¬O±NmyData³]©w©ó<div>¤W¡A¨Ì¥»¨Ò´N¬O·s¼W5Ó·sªº<div>©óºô¶¤W¡C
¡@¦Ó³Ì«áªº°Î¦W¨ç¦¡function(d)¡A«h¬O±N¸ê®ÆÅã¥Ü©óºô¶ªºtext¤W¡C
¹Ï¥|¡B°ÊºA·s¼W<div>¤¸¯À¡C
¹Ï¤¡BÀ˥ܺô¶¤¤¦Û°Ê¥Í¦¨ªº<div>¤¸¯À
±q¹Ï¤ªº¨Ò¤l¡A§Ú̪¾¹D³z¹Lenter()¨ç¦¡·s¼W¤F5Ó<div>¼ÐÅÒ©óºô¶¤W¡Aenter()·|¥h¤ñ¹ïºô¶¤¤ªº<div>¤¸¯ÀӼơA°²Y¥Ø«emyData¸ê®Æ¶q¤j©ó¤¸¯À¼Æ¶q¡A«h·|·s¼W¤¸¯À¡C¦ý°²Y¤¸¯À¼Æ¶q¤ñ¸û¦h¡A«h¤£·|·s¼W¡A©Ò¥H³oÃä§Ú̱Á{¤F¤@ÓD3®Ö¤ßªº°ÝÃD¡A°²Yºô¶¤W²{¦³ªº¤¸¯ÀӼơA»P§Ú̦s¤Jªº¸ê®Æ¶q¤£¬Û¦P®É¡A§ÚÌn¦p¦ó³B²z¡H¤U¤@¸`·|°w¹ï³oÓ°ÝÃDÄ~Äò²`¤J±´°Q¡C
¤T¡BD3.jsªº°ÊºA¾Þ§@®Ö¤ß·§©À
D3.js¦³¤TӮ֤ߪº¥\¯à¡Genter¡Bupdate¡Bexit¡A³o¤TÓ¥Dn¥\¯à´N¬O¥Î¨Ó°ÊºA±±¨îºô¶¤Wªº¤¸¯À¡A¥i¥H·Q¹³¹ïÀ³¦¨¤@¯ëªº·s¼W¡Bקï¡B§R°£µ¥¤TÓ¨BÆJ¡A¨ºD3¬O¦p¦ó¹F¦¨ªº¡A¥H¤U²³æ¤¶²Ð¨ä«ÂI¡G
¡@Enter¡G¤ñ¹ïºô¶¤Wªº¤¸¯À¶q¡AY¸ê®Æ¼Æ¶q¤j©ó¤¸¯À¼Æ¶q¡A«h·s¼W¤¸¯À¡C
¡@Update¡G¤ñ¹ïºô¶¤Wªº¤¸¯À¶q¡AY¸ê®Æµ¥©ó¤¸¯À¼Æ¶q¡A«h§ó·s¤¸¯À¡C
¡@Exit¡G¤ñ¹ïºô¶¤Wªº¤¸¯À¶q¡AY¸ê®Æ¼Æ¶q¤p©ó¤¸¯À¼Æ¶q¡A«h§R°£¤¸¯À¡C
¬°¤F§ó²M·¡¤F¸Ñ¾Þ§@ªº¤è¦¡¡A¥H¤U¥Î¤@³s¦êªº¨Ò¤l¨Ó»¡©ú¡Aº¥ý§Ú̶}±Ò¤@ӪŪºhtml¡A¦bconsole¤U¥Îenter()·s¼W¤@µ§Data¡A¦p¹Ï¤»©Ò¥Ü¡C
¹Ï¤»¡B¥ÎEnter()°ÊºA·s¼W1µ§¸ê®Æ (data > ªÅelement) ¡C
±µ¤U¨ÓÄ~Äò¨Ï¥Îenter()¡A·s¼W[2,3,4]¤Tµ§¸ê®Æ¡A¦p¹Ï¤C©Ò¥Ü¡A³oÃ䦳½ìªº¦a¤è¡A¦b©ó¨Ã¨S¦³±N¤¸¯À§ó·s¬°[2,3,4]¡A¤Ï¦Ó¬OÅܦ¨¤F[1,3,4]¡A¨º¬O¦]¬°enter()¶È¶È¥h¤ñ¹ïºô¶¤Wªº¤¸¯À¡Aµo²{¥Ø«e¸ê®Æ¤ñ¤¸¯À¦h¤F2µ§¡A¦]¦¹¥u·s¼W[3,4]ªº¸ê®Æ¡AYn§ïÅܨ䤸¯À¡A«h¥²¶·¨Ï¥Îupdateªº¤èªk¡C
¹Ï¤C¡B¥ÎEnter()·s¼W2µ§¸ê®Æ (data > element)¡C
±µ¤U¨Ó¨Ï¥Îupdateªº¤è¦¡§ó·sºô¶¡A±N·sªºData³]¬°[2,4,6]¡A¦]¬°¸ê®Æ¶q»P¤¸¯À¶q¤@¼Ë¡A©Ò¥H¤TÓ¤¸¯À·|±q[1,3,4]³Q§ó·s¦¨[2,4,6]¡A¦p¹Ï¤K©Ò¥Ü¡A°²Y¥u¹Á¸Õ§ó·s¨âµ§¸ê®Æ¡A¨Ò¦p[10,20]¡A¦]¬°update¬On¹ïÀ³¨ì¤@¼Ëªº¤¸¯ÀÓ¯À¡A©Ò¥H¥u·|§ó·s«e¨â¶µ¡A¦p¹Ï¤E©Ò¥Ü¡C
¹Ï¤K¡B¥ÎUpdate§ó·s3µ§¸ê®Æ ¡C(data = elements)
¹Ï¤E¡B¥ÎUpdate§ó·s2µ§¸ê®Æ¡C(data < elements)
±µ¤U¨Ó³Ì«á¤@¨B¡A«h¬On§Q¥Îexit()©Mremove()¨Ó§R°£¸ê®Æ¡A°²Y§Ú̳]©w·sdata¬°[1]¡A«h·|§R°£¥Ø«e[20,6]ªº¤¸¯À¡C¦p¹Ï¤Q©Ò¥Ü¡A³Ì«á±N¸ê®Æ§ó·s¬°[1]¡C
¹Ï¤Q¡B¥ÎExit§R°£2µ§¸ê®Æ¡C(data < elements)
²³æµ²½×¨Ó»¡¡Aenter()©Mexit()¡A¥i¥H·Q¹³¦¨¬O¤@ºØ¹LÂo¾¹¡Aenter()¬O¹LÂo¥X¦h¥X¨Óªº¸ê®Æ(data > elements)¡AµM«á¥Îappend()·s¼W¸ê®Æ¡A¦Óexit()«h¬O¥h¹LÂo¯Ê¤Öªº¸ê®Æ(data < elements)¡AµM«á§Q¥Îremove()¨Ó§R°£¤¸¯À¡C
¥H¤W§Q¥Î²³æªº½d¨Ò¨Ó»¡©ú¦p¦ó¨Ï¥ÎD3¨ç¦¡¨Ó¾Þ§@¤¸¯À¡A¦³¤F³o´XÓ¥\¯à¡A´N¤£¥Îªá¤ß«ä¥h³]pקï¼ÐÅÒ¡A¥Î«Ü²©öªº¤èªk§Y¥i°ÊºA±±¨îDOM¡A¦A·f°tSVG¹Ï¹³´N¥i¥H§@¥X¦U¦¡¦U¼Ëªº°ÊºA¹Ï¥Ü¾Þ§@¡C¥H¤U´£¨Ñ¤@Ó²³æªºµ{¦¡½X¡A±N¨ä¥t¦s¦¨htmlÀɧY¥i¥ÎÂsÄý¾¹(´ú¸Õ¦p¹Ï¤Q)¡A¹Ï¤Q¨äì©l½X¥X¦Û©óhttp://kuro.twªº§@ªÌ¡C
¹Ï¤Q¤@¡B§Q¥ÎEnter()©MExit()°ÊºAÅܧóªø±ø¹Ï¼Æ¶q¡C
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>D3.js Demo </title>
<style>
.wrap{
position: relative;
overflow: hidden;
margin-bottom: 1em;
}
.bar{
background-color: navy;
width: 2em;
height: auto;
margin-right: 5px;
float: left;
position: relative;
color: #fff;
text-align: center;
padding-top: 5px;
}
button{
font-size: 1.5em; float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<script>
var data = [1, 2, 3, 4, 5];
var height = 250, width = 300;
// body »P ®e¾¹
var body = d3.select('body');
var wrap = body.append('div')
.style({
'height': height + 'px'
})
.classed('wrap', true);
// render, & update
var render = function () {
wrap.selectAll('.bar')
.data(data)
.enter()
.append('div')
.classed('bar', true)
.text(function (d) {
return d;
})
.style({
'height': function (d) {
return d * 25 + 'px';
},
'top': function (d) {
return (height - d * 25) + 'px';
}
});
};
// remove
var remove = function () {
wrap.selectAll('.bar')
.data(data)
.text(function (d) {
return d;
})
.style({
'height': function (d) {
return d * 25 + 'px';
},
'top': function (d) {
return (height - d * 25) + 'px';
}
})
.exit()
.remove();
};
// ø»sì©l¸ê®Æ
render();
// ¨âÁû«ö¶s
body.append('button')
.classed('add', true)
.text('add');
body.append('button')
.classed('remove', true)
.text('remove');
d3.select('.add').on('click', function () {
data.push(Math.floor(Math.random() * 10 + 1));
render();
});
d3.select('.remove').on('click', function () {
data.pop();
remove();
});
</script>
</body>
</html>
¥|¡BSVG¹Ï¹³³B²z
¤W¤@¸`¥Dn¬O¤¶²ÐD3ªº³B²z¸ê®Æ·§©À¡A«e±¦³´£¹L¡AD3.js³Ì¤jªºÀu¶Õ¦b©ó¸ê®Æµøı¤Æªº§e²{¡A©Ò¥H¥»¸`±Nªá¤@ÂI½g´T±Ð¾Ç¦p¦ó±N¸ê®ÆÂàÅܦ¨¹Ï¹³¤Æ¡C
HTML5ªºSVG¹Ï¹³Åã¥Ü
HTML 5¥»¨¤º«ØSVGªºÅã¥Ü¡A¦]¦¹¥un¦bºô¶¤W¥[¤JSVGªº¼ÐÅÒ«á¡A§Y¥i¥H¦bºô¶¤Wµe¥XSVG¹Ï¹³¡CÁ|¨Ò¨Ó»¡¡A·Qnµe¥X¶ê©M¯x«¬ªº¹Ï«¬¡A§Y¨Ï¥Îcircle©Mrectªº¼ÐÅÒ§Y¥i¥Hµe¥X¦p¹Ï¤Q¤@©Ò¥Ü¡Awidth©Mheight¬Oµe®ØªºÃä¬Éªø»P¼e¡A¦Ócx©Mcy«h¬O¦b¦¹µe®Ø¤Wªº¬Û¹ï(x, y)®y¼Ð(°_©lìÂI¦ì©ó¥ª¤W¨¤¡Acx="25"¦V¥k25³æ¦ì¡A cy="25"¦V¤U25³æ¦ì)¡A¦]¦¹¦p¹Ï¤Q¤@µe¥X¤F¨âÓ¬Û¶Z50³æ¦ìªº¶ê§Î¡A¥Ñ©óHTMLªºSVG¤º®e«Ü¦h¡A¨ä¥¦§ó¸ÔºÉªº¤º®e¥i¥H°Ñ¦ÒW3Schoolªº½d¨Ò¤¶²Ð¡C
<svg width="100" height="100">
<circle cx="25" cy="25" r="25" fill="Red" />
<circle cx="75" cy="25" r="25" fill="Blue" />
</svg>
<svg width="100" height="100">
<rect cx="0" width="100" height="100" fill="Green" />
</svg>
¹Ï¤Q¤G¡BHTMLì¥ÍSVG¼ÐÅÒ¡C
D3.jsªºSVG¹Ï¹³Åã¥Ü
D3.jsªº¥Øªº¤]¬O²£¥ÍSVG¼ÐÅÒ¡A¦ý§Æ±æ¯à³z¹Ldata drivenªº¤è¦¡¨Ó»P¸ê®Æ³sµ²¡C¦b¤W±ªºHTML5ªº½d¨Ò¨Ó¬Ý¡A¦pªG§ÚÌ»Ýnµe¨âÓ¥H¤Wªº¶ê§Î®É¡A´Nn¦bsvg¼ÐÅÒ¤º«Ø¥ß¦hӹϧΪº¼ÐÅÒ(¨Ò¦pcircle)¡A¥i¬O³o¼Ë¤@¨Ó´N¤£®e©ö»P¸ê®Æ°ÊºAµ²¦X¡A¦]¦¹D3.js§Q¥Î¨ä°ÊºAÂX¥R©Ê¡A§Y¥i¥H±N¸ê®Æ»P¹Ï§Îº]©w¡C¥H¤U¬O¤@Ó²³æªº½d¨Ò¡A§Q¥ÎD3.js¨ç¦¡§Ú̧Ʊæ«Ø¥ß¥|Ó¤£¦Px¶b®y¼Ðªº¶ê¡A°²³]¤wª¾¿é¤Jªºx®y¼Ð¬°data = [25, 75, 125, 175]¡Aº¥ý¦bªÅ¥Õ¤w¸ü¤JD3.js¤¤¶}±ÒConsole¡A¨Ã¨Ò¥Î¥H¤Uªºµ{¦¡½X¡A°ÊºA²£¥Í¶ê§Î¡A¦p¹Ï¤Q¤G©Ò¥Ü¡C
// ¦bbody¤U«Ø¥ß¤@Ӫťժºsvg¼ÐÅÒ¡C
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 100);
// ±N¶êªºÄÝ©Ê»PDataµ²¦X¡C
var circleData = svg.selectAll("circle")
.data([25, 75, 125, 175]);
//§Q¥Îenter()¡A²£¥Í¶ê¡C
var circles = circleData.enter().append("circle")
.attr("cy", 25)
.attr("cx", function(d) { return d; })
.attr("r", 25)
.style("fill", function(d) {
if (d <= 25) return "Red";
else if (d<=75) return "Green";
else if (d<=125) return "Blue";
else return "Yellow"});
¹Ï¤Q¤T¡BD3²£¥ÍSVG¹Ï§Î½d¨Ò¡C
§Q¥ÎD3.js µe¥X¶ê»æ¹Ï
D3.js¥i¥Hµe¥X¶ê»æ¹Ï¡A¨ä¤º®eºô¸ô¤W«Ü¦h¥i¥H°Ñ¦Ò¡A¦³¿³¥i¥H°Ñ¦ÒDashing D3.js©Îbl.ock.org¡A§Q¥ÎŪ¨úcsvÀÉ¡A§Y¥i¥Hµe¥X¶ê»æ¹Ï¡A¦ý¨äµ{¦¡½Xµy·L½ÆÂøÂI¡C©Ò¥H¥»¤å±ÀÂË¥t¤@ӨϥÎD3.js¬[ºc¶}µoªº¨ç¦¡Plotly¡C¥»¨ç¦¡»Ý¥ý¥[¤Jplotlyªº¨ç¦¡®w¡A¦p¤Uhtml¹w³]¤å¥ó¡C
<!DOCTYPE html>
<html>
<head>
<script src=https://d3js.org/d3.v3.min.js charset="utf-8"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>D3.js Demo </title>
</head>
<body>
</body>
</html>
±µµÛ§Q¥ÎConsole½m²ß¥[¤J¦p¤Uªºµ{¦¡½X¡C
// ¦bbody¤U«Ø¥ß¤@Ӫťժºdiv¼ÐÅÒ¡C
d3.select("body").append("div").attr("id", "mydiv");
//³]©w±ýÅã¥Üªº¸ê®Æ¡C
var data = [{
values: [80, 40, 20],
labels: ['»O¥_', '»O¤¤', '°ª¶¯'],
type: 'pie'
}];
//³]©w®Ø¬[¤j¤p¡C
var frame = {
height: 500,
width: 500};
//¨Ï¥ÎPlotlyµe¥X¶ê»æ¹Ï¡C
Plotly.newPlot('mydiv', data, frame);
¹Ï¤Q¥|¡B¶ê»æ¹Ï½d¨Ò¡C
¤¡Bµ²½×
¥»¤åªá¤ñ¸û¦hªº½g´T¦b¤¶²ÐD3.jsªºdata driven·§©À¡A¦ý¹ï©óD3.jsªºÀ³¥Î¡Aºô¸ô¤W¸ê·½«D±`¦h¡A©Ò¥H¦³¿³½ìªºÅªªÌ¥i¥H¦Û¦æ°Ñ¦Ò©xºô´£¨Ñªº½d¨Ò¡Ghttps://github.com/d3/d3/wiki/Gallery¡C¨ä¤¤³o¨Ç½d¨Òªºµ{¦¡½X³£¤£¥Î¦bקï¡A¥un³]©wJSONÀɪº¸ê®Æ¤º®e¡A§Y¥i¥H±N¸ê®Æ¹Ï¹³µøı¤Æ¡C
¤»¡B°Ñ¦Ò¸ê®Æ
1. D3.js©xºô¡Ghttps://d3js.org/
2. Kuro.tw³¡¸¨®æ¡Ghttp://kuro.tw/categories/D3-js/
3. W3School HTML5¤UªºSVGÀ³¡Ghttp://www.w3schools.com/html/html5_svg.asp
4. Ployly©xºô¡Ghttps://plot.ly/