03-D3.js SVG text标签

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

【效果图】

css 复制代码
text {
    fill: var(--secondary-orange);
    text-anchor: middle;
    font-size: 14px;
}
javascript 复制代码
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 })
相关推荐
西洼工作室2 小时前
CSS高效开发三大方向
前端·css
昔人'2 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾3 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶4 小时前
Starting again-02
开发语言·前端·javascript
Apifox.4 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku5 小时前
Typescript return type
前端·javascript·typescript
叁佰万5 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆5 小时前
js异步任务你都知道了吗?
前端·面试
光影少年5 小时前
react生态
前端·react.js·前端框架
golang学习记5 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端