带有子值指标和标签的仪表图

Question

我是 d3.js 的新手。我想添加子值指示符和文本以及工具提示，如附图所示。子值指标的目的是显示一些临界值。如何在针的末尾添加文本？

我已经分享了下面的代码。请指导我实现这一目标。

爪哇脚本：

(function () {

  var Needle, arc, arcEndRad, arcStartRad, barWidth, chart, chartInset, degToRad, el, endPadRad, height, i, margin, needle, numSections, padRad, percToDeg, percToRad, percent, radius, ref, sectionIndx, sectionPerc, startPadRad, svg, totalPercent, width;

  percent = .65;

  barWidth = 60;

  numSections = 3;

  // / 2 for HALF circle

  sectionPerc = [0.1, 0.25, 0.15];

  padRad = 0;

  chartInset = 10;

  // start at 270deg

  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {

    top: 20,

    right: 20,

    bottom: 30,

    left: 20 };

  width = el[0][0].offsetWidth - margin.left - margin.right;

  height = width;

  radius = Math.min(width, height) / 2;

  percToDeg = function (perc) {

    return perc * 360;

  };

  percToRad = function (perc) {

    return degToRad(percToDeg(perc));

  };

  degToRad = function (deg) {

    return deg * Math.PI / 180;

  };

  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  chart = svg.append('g').attr('transform', `translate(${(width + margin.left) / 2}, ${(height + margin.top) / 2})`);

  // build gauge bg

  for (sectionIndx = i = 1, ref = numSections; 1 <= ref ? i <= ref : i >= ref; sectionIndx = 1 <= ref ? ++i : --i) {

    arcStartRad = percToRad(totalPercent);

    arcEndRad = arcStartRad + percToRad(sectionPerc[sectionIndx-1]);

    totalPercent += sectionPerc[sectionIndx-1];

    startPadRad = 0;

    endPadRad = 0;

    arc = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth).startAngle(arcStartRad + startPadRad).endAngle(arcEndRad - endPadRad);

    chart.append('path').attr('class', `arc chart-color${sectionIndx}`).attr('d', arc);

  }

HTML：

<div class="chart-gauge"></div>

谢谢