如何获取dc柱状图的轴生成器？能否通过dc.js/D3 API实现？

当然可以！dc.js本身就是基于D3构建的，完全可以利用这两个库的原生API来实现你的需求，而且比手动计算DOM元素的height和y属性要靠谱得多——毕竟dc已经帮你把数据和可视化层做了绑定。

获取轴生成器 #

dc的柱状图实例直接提供了获取D3轴生成器的方法，不用绕弯子：

// 获取目标柱状图的X轴生成器
const xAxis = sim.barCharts[i].xAxis();
// 获取目标柱状图的Y轴生成器
const yAxis = sim.barCharts[i].yAxis();

拿到的xAxis和yAxis就是标准的D3轴对象，你可以直接访问它的比例尺（xAxis.scale()）、刻度配置等信息，完全符合D3的API规范。

直接获取bar对应的数值（无需手动计算） #

既然数据已经存在，根本不用去读DOM元素的属性，有两种更直接的方式：

1. 从图表实例直接获取所有绑定数据
   dc图表对象的data()方法可以直接返回当前可视化绑定的所有数据点：

   const chartData = sim.barCharts[i].data();
   // 遍历数据点，直接拿到原始数值
   chartData.forEach(dataPoint => {
       console.log('分类值（X轴）:', dataPoint.key); // 字段名根据你的数据结构调整
       console.log('数值（Y轴）:', dataPoint.value); // 对应你的数值字段
   });
   

2. 从单个bar元素获取绑定的数据
   如果需要针对某个特定的bar元素，用D3选中它后可以直接拿到绑定的原始数据：

   // 选中目标bar元素
   const targetBar = d3.select(sim.barCharts[i].getElementsByClassName('bar')[j]);
   // 获取该bar绑定的原始数据对象
   const barData = targetBar.datum();
   // 直接提取数值
   const value = barData.value; // 同样根据你的数据结构调整字段名
   

为什么不推荐手动计算DOM属性？ #

DOM元素的height和y是经过比例尺转换后的像素值，中间可能会因为图表缩放、padding设置、样式偏移等因素出现误差，而直接获取绑定的原始数据或者使用轴的比例尺转换，才是最准确的方式。

内容的提问来源于stack exchange，提问作者Mussé Redi