d3js.org v5.9.2 之前只是各个部分的 demo，现在将各部分整合起来，发现还是学到了不少东西 主要是加深了对 scale（比例尺）的理解
代码
样式及数据
先是样式
<style>
rect {
fill: pink
}
text {
font-size: 10px;
}
</style>
接着是数据及柱状图宽高等
const
data = [3, 6, 10, 25],
barWidth = 100,
barHeight = 300,
padding = {//svg 留白用
top: 100,
right: 100,
bottom: 100,
left: 100
};
创建比例尺
实践之后对比例尺与坐标轴的理解加深了一点
let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),// y 轴使用线性比例尺，注意 domain 输入域
xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth – 1) * data.length]); // x 轴使用 scaleBand 比例尺
barScale 用于柱形图创建 yAxisScale 用于 y 轴创建，注意 domain() 的输入域，否则刻度数值大小排列会相反 xAxisScale 用于 x 轴创建，使用 scaleBand 序数比例尺 之前对比例尺的理解太过肤浅，这里也做了几个小实验
console.log(`barScale(0)：` + barScale(0));
console.log(`yAxisScale(0)：` + yAxisScale(0));
console.log(`xAxisScale(2)：` + xAxisScale(2));
显示如下
对于 barScale 与 yAxisScale，输入域相反，所以映射相反，把一篇他人很棒的总结放于文末
创建柱状图
let barContainer = d3.select(‘.chart’)
.attr(‘width’, data.length * barWidth + padding.left + padding.right)
.attr(‘height’, barHeight + padding.top + padding.bottom)
.selectAll(‘g’)
.data(data).enter().append(‘g’)
.attr(‘transform’, (d, i) => {
return ‘translate(‘ + (padding.left + i * barWidth) + ‘,’ + (padding.top + barHeight – barScale(d)) + ‘)’
});
barContainer.append(‘rect’)
.attr(‘height’, d => barScale(d))
.attr(‘width’, barWidth – 1);
barContainer
.append(‘text’)
.text(d => d)
.attr(‘y’, 10)
.attr(‘x’, barWidth / 2 – 5);
这里使用了之前定义的 padding 对象的值进行部分留白
创建坐标轴
/**
* 创造 y 轴
*/
let yAxis = d3.axisLeft(yAxisScale);
d3.select(‘.chart’)
.append(‘g’)
.attr(‘transform’, ‘translate(‘ + (padding.left – 10) + ‘,’ + padding.top + ‘) ‘)
.call(yAxis);
/**
* 创建 X 轴
*/
let xAxis = d3.axisBottom(xAxisScale);
d3.select(‘.chart’)
.append(‘g’)
.attr(‘transform’, ‘translate(‘ + (padding.left) + ‘,’ + (padding.top + barHeight) + ‘)’)
.call(xAxis);
最后创建坐标轴
总结
对之前学的东西做了一次结合，还有很多地方待提升 不足请大佬指出
参考资料
D3 中常用的比例尺 完整的柱形图