标签：线图 基于 const attr xScale data d3 append
来源
总结
轴在左下角的对齐
纵轴比例尺渲染的最大高度 = 横轴在y方向的偏移量
横轴上刻度的间隔
本例中横轴使用的是离散比例尺，有padding()方法可以用来调整刻度间的间隔。
本例中使刻度的内外间隔保持一致。
csv数据
长这个样子
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const svgWidth = 600,
svgHeight = 400,
margin = 120,
axisWidth = svgWidth - margin,
axisHeight = svgHeight - margin;
const svg = d3
.select('body')
.append('svg')
.attr('height', svgHeight)
.attr('width', svgWidth);
// 纵轴比例尺
const yScale = d3.scaleLinear().range([axisHeight, 0]);
// 横轴比例尺
const xScale = d3.scaleBand().range([0, axisWidth]).padding(0.4);
// 创建组元素，调整图表在svg中的位置
const g = svg.append('g').attr('transform', 'translate(50, 50)');
d3.csv('../bar_data.csv').then((data) => {
xScale.domain(data.map((d) => d.year));
yScale.domain([0, d3.max(data, (d) => d.value)]);
// 添加横轴
g.append('g')
.attr('transform', `translate(0, ${axisHeight})`)
.call(d3.axisBottom(xScale));
// 添加纵轴
g.append('g').call(d3.axisLeft(yScale));
// 添加柱形
g.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d) => xScale(d.year))
.attr('y', (d) => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', (d) => axisHeight - yScale(d.value))
.attr('fill', 'green');
});
</script>
</body>
</html>
标签：线图,基于,const,attr,xScale,data,d3,append 来源： https://www.cnblogs.com/zoexu/p/15627292.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。