選擇器
--------------------------------------------------------------------------------
body
<div id="button-container">
<button id="A">按下A按鈕</button>
<button id="B">按下B按鈕</button>
</div>
script
d3.selectAll('#button-container > button').on('click', function () {
var chartType = d3.select(this).attr('id');
--------------------------------------------------------------------------------
body
<div id="content">
<svg class="svg"></svg>
</div>
script
var svg = d3.select('.svg');
------------------------------子項目選取--------------------------------------
body
<div id="content">
<text height="50"> tx </text>
</div>
script
d3.select('#content').select('text').attr('height') 選屬性
d3.select(this).select('text').text() 選內文
--------------------------------------------------------------------------------
屬性設置
script
svg.attr({
"width": width + margin,
"height": height + margin * 2,
"transform": "translate(" + margin + "," + margin + ")"
});
--------------------------------------------------------------------------------
陣列數據地圖 d3.map([object][, key])
索引陣列數據內的資料, [object]為資料陣列, key為索引名稱, 可以說是欄位名稱.
data = [{name: 'aa',value: 32},{name: 'bb',value: 26},{name: 'cc',value: 45}];
var Xdatas = data.map(function(d) {return d.name});
因此回得到三組key為name的資料
https://www.oxxostudio.tw/articles/201412/svg-d3-07-data-map.html
https://www.cnblogs.com/kidsitcn/p/7182274.html
回傳值是否存在 map.has(key)
由陣列數據地圖延伸
console.log(Xdatas .has('aa'));
坐標軸 d3.scaleBand()
根據資料數量將坐標軸切割相對等分, domain為x軸資料, rangeRound為坐標軸寬度width=600, 而padding會彼此間距.
let x = d3.scaleBand().domain(Xdatas).rangeRound([0, 600]).padding(0.1);
如Xdatas={'A','B','C','D','E','F'}, 共有6筆資料所以會分成6等分,每一等份為100.
當輸入x('B'),就會得到轉換後的數值為100.
線性比例尺 d3.scaleLinear()
相對比例的放大或縮小, 例如1-10轉換為100-1000, 那麼輸入域domain就是1-10, 輸出域range就是100-1000.
let scale = d3.scaleLinear().domain([1,10]).range([100,1000])
當輸入scle(5),就會得到轉換後的數值為500, 若是在容器內該筆資料的區塊相對高度為500.
SVG 自適應大小
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("viewBox", "0 0 800 400")
留言列表
