c3.js gauge draw thresholds

by beaver71

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js"></script>
<svg id="chart"></svg>

CSS

#chart {
  width: 100%;
  min-height: 300px;
}

.mytxt {
  font-size: 12pt;
}

JavaScript

var chart;
var thresholdOpts = {
	boxSize: 14,
  boxFill: false,
  strokeWidth: 2,
};
var opts = {
  bindto: "#chart",
  data: {
    columns: [
      ['data', 70]
    ],
    type: 'gauge',
  },
  padding: {
    top: 10,
  },
  legend: {
    show: true
  },
  gauge: {

  },
  color: {
    pattern: ['yellow', 'orange', 'red', 'purple'],
    threshold: {
      values: [24, 60, 80]
    }
  },
  onrendered: function() {
    console.log("onrendered", this);
    drawThresholds(this, thresholdOpts, opts);
  }
};
chart = c3.generate(opts);

function drawThresholds(chart, thOpts, chOpts) {
  d3.selectAll("line.myline").remove();
  d3.selectAll("rect.myrect").remove();
  d3.selectAll("text.mytxt").remove();
  var radius = chart.radius,
    iradius = chart.innerRadius;
  for (var i in chOpts.color.threshold.values) {
    var v = chOpts.color.threshold.values[i];
    var col = chOpts.color.pattern[parseInt(i) + 1];

    var angle = Math.PI * v / 100;
    var x0 = (iradius * Math.cos(angle));
    var y0 = (iradius * Math.sin(angle));
    var x1 = (radius * Math.cos(angle));
    var y1 = (radius * Math.sin(angle));
    d3.select(".c3-chart-arcs").append("line")
      .attr({
        x1: -x0,
        y1: -y0,
        x2: -x1,
        y2: -y1
      })
      .attr('class', 'myline')
      .style("stroke-width", thOpts.strokeWidth)
      .style("stroke", 'black');

    var x1 = ((radius + thOpts.boxSize) * Math.cos(angle)) + thOpts.boxSize / 2;
    var y1 = ((radius + thOpts.boxSize) * Math.sin(angle)) + thOpts.boxSize / 2;
    d3.select(".c3-chart-arcs").append("rect")
      .attr({
        width: thOpts.boxSize,
        height: thOpts.boxSize,
        x: -x1,
        y: -y1
      })
      .attr('class', 'myrect')
      .style("fill", thOpts.boxFill ? col : "none")
      .style("stroke-width", thOpts.strokeWidth)
      .style("stroke", col);
    var txtSize = measure(v, "mytxt");
    var x1 = ((radius + thOpts.boxSize) * Math.cos(angle)) + txtSize.width / 2;
    var y1 = ((radius...