D3开发双仪表盘时如何在指针旁同步展示对应数值

核心改造逻辑 #

基于现有可正常渲染双仪表盘的代码，仅需做三类改动即可实现指针同步展示数值的效果，无需重构原有组件逻辑：

• 修复原有代码的内置报错
• 在组件内部新增固定位置的数值展示文本节点
• 在指针更新动效的函数中同步更新文本内容

具体代码改动点 #

1. 修复原有代码运行错误 #

• 恢复刻度标签绘制的enter()入口，否则刻度标签完全不会渲染
• 拆分圆弧渐变分段数和刻度标签数：在config对象中新增tickLabelCount: 10配置项，将原ticks = scale.ticks(config.majorTicks)修改为ticks = scale.ticks(config.tickLabelCount)，避免600个刻度文字堆叠遮挡圆弧
• 修正定时器中的变量引用错误，把不存在的custom2替换为实际定义的powerGauge2，避免控制台抛出未定义变量的报错

2. 新增内部数值文本节点 #

在gauge组件的内部变量声明区域，追加文本节点的存储变量：

var valueText = undefined;

在gauge组件的render函数中，完成指针绘制的逻辑后，追加中心数值文本的创建代码：

// 绘制中心展示的数值文本
valueText = svg.append('g')
  .attr('transform', centerTx)
  .append('text')
  .attr('text-anchor', 'middle')
  .attr('y', 60) // 位置调整到指针转轴正下方
  .style('font-size', '36px')
  .style('font-weight', '600')
  .style('fill', '#222')
  .text(0);

3. 同步更新文本内容 #

改造原有update函数，在指针添加旋转动效的同步逻辑中，把传入的数值格式化后更新到文本节点上：

function update(newValue, newConfiguration) {
  if ( newConfiguration  !== undefined) {
    configure(newConfiguration);
  }
  var ratio = scale(newValue);
  var newAngle = config.minAngle + (ratio * range);
  // 原有指针旋转动效逻辑保持不变
  pointer.transition()
    .duration(config.transitionMs)
    .ease('elastic')
    .attr('transform', 'rotate(' +newAngle +')');
  // 同步更新中心展示的数值
  valueText.text(config.labelFormat(newValue));
}

样式微调（匹配示例视觉效果） #

在原有style块中追加样式规则，优化指针、圆弧的视觉表现：

.pointer {
  fill: #1a202c;
  stroke: #1a202c;
}
.arc {
  stroke: none;
}
text {
  font-family: Helvetica, Arial, sans-serif;
  user-select: none;
}

内容的提问来源于stack exchange，提问作者Shivani