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 })
相关推荐
m0_64880493_江哥3 分钟前
Python实现随机选播视频的示例代码
前端·python·音视频
_大学牲4 分钟前
禁止复制内容 🤔 那点事~
前端·chrome·程序员
申阳8 分钟前
Day 1:耗时2小时,梳理并分享我作为全栈开发最依赖的“兵器库”
前端·后端·程序员
思考着亮8 分钟前
formData
javascript
UIUV37 分钟前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎1 小时前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma1 小时前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面1 小时前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
前端九哥1 小时前
老板:就是你小子删光了try-catch?
前端·javascript
杰出的胡兵1 小时前
2v1带您实战12nm高级数字后端
前端·soc·数字后端·数字ic后端·芯片设计全流程培训