Калибровочные диаграммы с индикаторами подзначения и этикеткой - PullRequest
Новая
       34

Калибровочные диаграммы с индикаторами подзначения и этикеткой

1 голос
/ 08 июня 2019

Я новичок в d3.js.Я хочу добавить индикатор подзначения и текст вместе с подсказкой, как показано на прикрепленном изображении.Цель индикатора дополнительной стоимости - показать некоторое значение отсечения.Как я могу добавить текст в конце иглы?screenshot

Я поделился кодом ниже.Пожалуйста, ведите меня, чтобы достичь этого.

JAVASCRIPT: 

(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);
  }
  Needle = class Needle {
    constructor(len, radius1) {
      this.len = len;
      this.radius = radius1;
    }
    drawOn(el, perc) {
      el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
      return el.append('path').attr('class', 'needle').attr('d', this.mkCmd(perc));
    }
    animateOn(el, perc) {
      var self;
      self = this;
      return el.transition().delay(500).ease('elastic').duration(3000).selectAll('.needle').tween('progress', function () {
        return function (percentOfPercent) {
          var progress;
          progress = percentOfPercent * perc;
          return d3.select(this).attr('d', self.mkCmd(progress));
        };
      });
    }
    mkCmd(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2); // half circle
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
      return `M ${leftX} ${leftY} L ${topX} ${topY} L ${rightX} ${rightY}`;
    }};
  needle = new Needle(140, 15);
  needle.drawOn(chart, 0);
  needle.animateOn(chart, percent);
}).call(this);
//# sourceURL=coffeescript

CSS: 

@import compass

.chart-gauge
  width: 400px
  margin: 10px auto  

.chart-color1
  fill: #D82724

.chart-color2
  fill: #FCBF02

.chart-color3
  fill: #92D14F

.needle,
.needle-center
  fill: #464A4F

.prose
  text-align: center
  font-family: sans-serif
  color: #ababab

HTML: 

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

Спасибо

1 Ответ

1 голос
/ 08 июня 2019

Для создания этого индикатора вспомогательного значения вам просто нужно установить генератор дуги, который принимает процентное значение, которое вы хотите установить (здесь оно называется subIndicator), с отступом во внешнем и внутреннем радиусах ... 

arc2 = d3.svg.arc()
    .outerRadius(radius - chartInset + 10)
    .innerRadius(radius - chartInset - barWidth - 10)
    .startAngle(percToRad(subIndicator))
    .endAngle(percToRad(subIndicator));

... и использовать его для добавления нового пути: 

chart.append('path')
    .attr('d', arc2)
    .style("stroke", "black")
    .style("stroke-width", "2px");

Обратите внимание на тот факт, что, учитывая то, как автор оригинального кода устанавливает свои функции, ноль в индикаторе эквивалентен 75%. Поэтому вы должны установить процентное значение соответственно. Например, позиционирование индикатора дополнительной стоимости на 55%: 

subIndicator = totalPercent + (55 / 200);

Вот демонстрационная версия (с использованием 55% для индикатора субзначения): 

(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, subIndicator;

  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;
  
  subIndicator = totalPercent + (55/200)

  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);
  }
  
  arc2 = d3.svg.arc().outerRadius(radius - chartInset + 10).innerRadius(radius - chartInset - barWidth - 10).startAngle(percToRad(subIndicator)).endAngle(percToRad(subIndicator));
    chart.append('path').attr('d', arc2).style("stroke", "black").style("stroke-width", "2px");

  Needle = class Needle {
    constructor(len, radius1) {
      this.len = len;
      this.radius = radius1;
    }

    drawOn(el, perc) {
      el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
      return el.append('path').attr('class', 'needle').attr('d', this.mkCmd(perc));
    }

    animateOn(el, perc) {
      var self;
      self = this;
      return el.transition().delay(500).ease('elastic').duration(3000).selectAll('.needle').tween('progress', function () {
        return function (percentOfPercent) {
          var progress;
          progress = percentOfPercent * perc;
          return d3.select(this).attr('d', self.mkCmd(progress));
        };
      });
    }

    mkCmd(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2); // half circle
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
      return `M ${leftX} ${leftY} L ${topX} ${topY} L ${rightX} ${rightY}`;
    }};



  needle = new Needle(140, 15);

  needle.drawOn(chart, 0);

  needle.animateOn(chart, percent);

}).call(this);

//# sourceURL=coffeescript
.chart-gauge {
  width: 400px;
  margin: 10px auto;
}

.chart-color1 {
  fill: #D82724;
}

.chart-color2 {
  fill: #FCBF02;
}

.chart-color3 {
  fill: #92D14F;
}

.needle,
.needle-center {
  fill: #464A4F;
}

.prose {
  text-align: center;
  font-family: sans-serif;
  color: #ababab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="chart-gauge"></div>

Используйте тот же подход для добавления текста индикатора вспомогательного значения.

...