D3的特征
允許將任意數據綁定到DOM，並將數據驅動轉換應用到文檔。
不僅可以創建漂亮的HTML表格，還可以繪制折線圖、柱形圖、餅圖等數據圖表。
支持SVG，在網頁上渲染無壓力。
回到頂端
如何使用D3
D3的具體用法請參考D3圖形庫API中的這篇文章。本文主要介紹壹些經典圖表的實現效果和代碼。
Index.html電碼:
& lt！DOCTYPE？html & gt
& ltmeta？charset="utf-8 " >
& ltstyle & gt
svg？{
字體:？10px？無襯線字體；
}
. y軸？路徑？{
顯示:？無；
}
. y軸？線？{
筆畫:？# fff
筆畫不透明度:？.2;
形狀渲染:？卷曲邊緣；
}
. y軸？。零？線？{
筆畫:？#000;
筆畫不透明度:？1;
}
。標題？{
字體:？300?78px？Helvetica？Neue
填充:？#666;
}
。出生年份，
。年齡？{
文本錨:？中間；
}
。出生年份？{
填充:？# fff
}
rect？{
填充-不透明度:？.6;
填充:？# e377c2
}
rect:第壹胎？{
填充:？# 1f77b 4；
}
& lt/style & gt；
& ltbody & gt
& lt劇本？src = " http://d3js . org/D3 . v3 . min . js " & gt；& lt/script & gt；
& lt腳本& gt
var？保證金？=?{top:？20,?對不對:？40,?底部:？30,?左:？20},
寬度？=?960?-?邊距。左邊？-?邊緣。對，
身高？=?500?-?margin.top？-?頁邊距。底部，
酒吧寬度？=?Math.floor(寬度？/?19)?-?1;
var？x？=?d3.scale.linear()
。範圍([barWidth？/?2,?寬度？-?酒吧寬度？/?2]);
var？y？=?d3.scale.linear()
。範圍(【身高，0]);
var？亞克西斯？=?d3.svg.axis()
。刻度(y)
。東方(“右”)
。tickSize(-寬度)
。tickFormat(函數(d)？{?回歸？Math.round(d？/?1e6)？+?”M”；？});
//?安？SVG？元素？用什麽？答？右下方？起源。
var？svg？=?d3.select("body ")。追加(" svg ")
。attr("width "，寬度？+?邊距。左邊？+?右邊距)
。attr("高度"，身高？+?margin.top？+?邊距.底部)
。附加(" g ")
。attr("transform "，“翻譯(？+?邊距。左邊？+?","?+?margin.top？+?")");
//?答？滑動？集裝箱？去哪？保持？那個？酒吧？被誰？出生年份。
var？出生年份？=?svg.append("g ")
。attr("class "，“出生年份”)；
//?答？標簽？為了什麽？那個？當前？年份。
var？標題？=?svg.append("text ")
。attr("class "，“標題”)
。attr("dy "，. 71em ")
。正文(2000年)；
d3.csv("population.csv "，函數(誤差，？數據)？{
//?皈依？弦樂？去哪？數字。
data.forEach(函數(d)？{
d .人？=?+d .人；
公元年？=?+d . year；
d .年齡？=?+d .年齡；
});
//?計算？那個？程度？的？那個？數據？設置？在？年齡？然後呢。幾年。
var？年齡1？=?d3.max(數據，？功能(d)？{?回歸？d .年齡；？}),
year0？=?d3.min(數據，？功能(d)？{?回歸？d .年份；？}),
year1？=?d3.max(數據，？功能(d)？{?回歸？d .年份；？}),
年份？=?year 1；
//?更新？那個？尺度？域。
x.domain([year1？-?年齡1，？year 1])；
y.domain([0，d3.max(數據，？功能(d)？{?回歸？d .人；？})]);
//?生產？答？地圖？從哪裏？年份？然後呢。出生年份？去哪？【男，？女】。
數據？=?d3.nest()
。鍵(功能(d)？{?回歸？d .年份；？})
。鍵(功能(d)？{?回歸？公元年？-?d .年齡；？})
。rollup(函數(v)？{?回歸？v.map(函數(d)？{?回歸？d .人；？});？})
。地圖(數據)；
//?補充？安？軸？去哪？秀？那個？人口？價值觀。
svg.append("g ")
。attr("class "，“y？軸”)
。attr("transform "，“翻譯(？+?寬度？+?",0)")
。呼叫(yAxis)
。選擇全部(“g”)
。過濾器(函數(值)？{?回歸？！價值；？})
。分類("零"，真)；
//?補充？貼標簽？rects？為了什麽？每個？出生年份？(所以呢？那個？沒有嗎？進入？還是？退出？是嗎？必選)。
var？出生年份？=?birthyears.selectAll("。出生年份”)
。數據(d3.range(year0？-?年齡1，？year1？+?1,?5))
。輸入()。附加(" g ")
。attr("class "，“出生年份”)
。attr("transform "，函數(出生年份)？{?回歸？“翻譯(？+?x(出生年份)？+?",0)";？});
birthyear.selectAll("rect ")
。數據(函數(出生年份)？{?回歸？數據[年份][出生年份]？||?[0,?0];？})
。輸入()。追加(" rect ")
。attr("x "，-酒吧寬度？/?2)
。attr("width "，條寬)
。attr("y "，y)
。attr("高度"，功能(價值)？{?回歸？身高？-?y(值)；？});
//?補充？標簽？去哪？秀？出生年份。
birthyear.append("text ")
。attr("y "，身高？-?4)
。文本(函數(出生年份)？{?回歸？出生年份；？});
//?補充？標簽？去哪？秀？年齡？(分開；？不是嗎？動畫)。
svg.selectAll("。年齡”)
。數據(d3.range(0，年齡1？+?1,?5))
。輸入()。追加(“文本”)
。attr("class "，“年齡”)
。attr("x "，功能(年齡)？{?回歸？x(年份？-?年齡)；？})
。attr("y "，身高？+?4)
。attr("dy "，. 71em ")
。文字(功能(年齡)？{?回歸？年齡；？});
//?允許嗎？那個？箭頭？鑰匙？去哪？改變？那個？顯示？年份。
window . focus()；
d3 .選擇(窗口)。on("keydown "，函數()？{
切換？(d3.event.keyCode)？{
案子？37:?年份？=?Math.max(year0，年份？-?10);？打破；
案子？39:?年份？=?Math.min(year1，？年份？+?10);？打破；
}
update()；
});
功能？update()？{
如果？(!(年份？在？數據))？返回；
title.text(年份)；
birthyears.transition()
。持續時間(750)
。attr("transform "，“翻譯(？+?(x(year1)？-?x(年))？+?",0)");
birthyear.selectAll("rect ")
。數據(函數(出生年份)？{?回歸？數據[年份][出生年份]？||?[0,?0];？})
。過渡()
。持續時間(750)
。attr("y "，y)
。attr("高度"，功能(價值)？{?回歸？身高？-?y(值)；？});
}
});