Data Visualization + D3.js ? SuperHiLearn how to create interactive, engaging experiences using HTML, CSS, SVG and Javascript.https://www.superhi.com/catalog/data-visualization-with-d3
text - SVG:可縮放矢量圖形 | MDNtext元素定義了一個由文字組成的圖形。注意:我們可以將漸變、圖案、剪切路徑、遮罩或者濾鏡應用到 text 上。https://developer.mozilla.org/zh-CN/docs/Web/SVG/Reference/Element/text
text-anchor - SVG:可縮放矢量圖形 | MDN文本錨點屬性被用來描述該文本與所給點的對齊方式(開頭、中間、末尾對齊)。https://developer.mozilla.org/zh-CN/docs/Web/SVG/Reference/Attribute/text-anchor
【效果圖】
text {fill: var(--secondary-orange);text-anchor: middle;font-size: 14px;
}
const todaySvg = d3.select('svg')// https://d3js.org/d3-scale/linear
const barScale = d3.scaleLinear().domain([0, 2000]).range([1, 112])todaySvg.selectAll('rect').data(todayData).enter().append('rect').attr('x', (d, i) => { return i * 36 }).attr('y', (d, i) => { return 112 - barScale(d) }).attr('width', 24).attr('height', (d, i) => { return barScale(d) })todaySvg.selectAll('text').data(todayData).enter().append('text').attr('x', (d, i) => { return i * 36 + 12 }).attr('y', 130).text((d, i) => { return i })
?