Установить всплывающую подсказку на графике plottablejs из директивы Angular

Question

Я получил угловую директиву, которая отображает линейный график. Но мне нужно установить всплывающие подсказки со значением, когда курсор наводит линию на график.

Я получил что-то вроде этого:

var plot = new Plottable.Plots.Line()
   .addDataset(ds)
   .x(project_x, xScale)
   .y(project_y, yScale)
   .attr('stroke', function(d) { return label; }, colorScale);

и оказывает с

var svgElem = elem.find('svg')[0];
plot.renderTo(svgElem);

Это работает отлично:), а затем я пытаюсь добавить несколько подсказок из этого примера: http://jsfiddle.net/gv1xsnkr/

// Initializing tooltip anchor
var tooltipAnchorSelection = plot.foreground().append("circle").attr({
  r: 3,
  opacity: 0
});

В примере они используют jquery, я не хочу импортировать jquery только для этого

var tooltipAnchor = $(tooltipAnchorSelection.node());
tooltipAnchor.tooltip({
  animation: false,
  container: "body",
  placement: "auto",
  title: "text",
  trigger: "manual"
});

Поэтому я пытаюсь сделать это так

var tooltipAnchor = document.querySelectorAll(tooltipAnchorSelection.node().nodeName);

Но я получаю ошибку на

tooltipAnchor.tooltip({ ... });

angular.js:14516 Ошибка типа: tooltipAnchor.tooltip не является функцией

Кто-нибудь получил ключ, чтобы сделать это?

Answer 1

У меня была эта проблема с использованием Vue.js, а не Angular, но проблема звучит очень похоже. Это была проблема импорта библиотек в правильном порядке:

• Первый jquery (требуется для начальной загрузки)
• Затем начальная загрузка

Как вы упаковываете свое приложение?

Я использовал gulp, поэтому последовательность, которая работала для меня, заключалась в том, чтобы поместить тег сценария jquery в index.html а также bootstrap = require('bootstrap') в компоненте vue (вы бы поместили его в директиву). Требование в начальной загрузке должно быть все, что необходимо - это даст вам доступ к tooltip функция.