Как настроить указатель калибровочной стрелки с помощью D3.js или C3.js? - PullRequest
Новая
       36

Как настроить указатель калибровочной стрелки с помощью D3.js или C3.js?

0 голосов
/ 01 июня 2018

Мне нужно построить датчик в моем проекте.Я использую d3.js для построения датчика.Я Перешел по этой ссылке

Работает хорошо, но мне нужно настроить острие иглы.Я искал довольно много, но я не мог найти решение для настройки указателя иглы.

Это мой результат:

Result

Ожидаемый результат:

Expected

Как этого добиться с помощью d3.js или c3.js.Если у кого-нибудь есть идея, поделитесь со мной.Заранее спасибо.

1 Ответ

0 голосов
/ 01 июня 2018

Основываясь на предоставленной вами ссылке, вам нужно отредактировать: 

Needle.prototype.render = function() {
  this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);

  return this.el.append('path').attr('class', 'needle').attr('id', 'client-needle').attr('d', recalcPointerPos.call(this, 0));


};

В этом коде добавочная окружность является центром иглы, а путь - кончиком иглы.Позиции d рассчитываются с использованием функции recalcPointerPos 

 var recalcPointerPos = function(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2);
      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;
    };

. Как видно, возвращаемая часть этой функции отправляет координаты траектории кончика иглы.Редактирование этих возвращаемых значений позволит вам настроить его.

Обновление: более подробную информацию о математике, связанной с этим, можно найти на этой странице Джейка Трента .

Надеюсь, это поможет.Для более подробного объяснения, пожалуйста, поделитесь своим собственным кодом, чтобы мы могли его просмотреть.

Обновление: в качестве альтернативы, здесь есть более простое решение, основанное на комментариях создателя вопроса:

Просто добавьте белый круг на верхнюю часть калибра с соответствующим радиусом.Поместите это после иглы и добавьте к графику: 

chart.append("circle")
    .attr("r", 70)
    .style("fill", "white")
    ;

Проверьте этот плункер: https://plnkr.co/edit/25KSME35LewdkQaybBc5?p=preview

Обновление 2: Придумайте лучший, но немного более сложный способделать то же самое, что и выше, но использовать маски SVG . В этом методе вы избегаете создания белого круга, поэтому, если вы поместите датчик на другой фон, он не будет показывать белый круг.Этот метод использует маски.Нам нужно определить маску из двух окружностей:

  1. Круг с заливкой белым - это область, которая будет показана, т.е. радиус будет таким же, как у всего датчика.
  2. Круг с заливкой черного цвета - это область, которая будет скрыта / замаскирована.

Эта маска должна быть определена после того, как траектории дуг добавлены как: 

chart.append("defs")
    .append("mask")
    .attr ("id", "mask-1")
    .append("circle")
    .attr("r", 180)
    .style("fill", "#FFF")
    ;
d3.select("#mask-1")
      .append("circle")
    .attr("r", 70)
    .style("fill", "#000");

Затем нам нужно добавить эту маску к игле и центру иглы следующим образом: 

Needle.prototype.render = function() {
 this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius)
.attr("mask", "url(#mask-1)");

  return this.el.append('path').attr('class', 'needle').attr('id', 'client-needle').attr('d', recalcPointerPos.call(this, 0))
.attr("mask", "url(#mask-1)");
};

Проверьте этот поршень для демонстрации этого метода.https://plnkr.co/edit/4SQSNO?p=preview

...