всплывающая подсказка с подсказкой d3 не отображается

Question

Я пытаюсь реализовать всплывающую подсказку в svg, используя Angular, d3 v4, d3-tip.

вот логика JS

var data = [{
    train: 1
}, {
    train: 2
}, {
    train: 3
}, {
    train: 4
}]
const tip = d3Tip()
let svg =d3.select('svg')
tip
  .offset([-10, 0])
  .html(d => {
    return (
      `<strong>Frequency:</strong> <span style="color:red"> test</span>"` 
    )
  })

svg.call(tip)
let selectedElms = d3.selectAll('circle')
  .data(data, function(d) {
    console.log(this.id)
    return (d && d.train) || this['id'];
  })

selectedElms
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

  }

Проблема в том, что ничего не отображается нана экране, но я заметил, что при наведении курсора на элементы запускается функция tip (отладчик Chrome)

return (
      `<strong>Frequency:</strong> <span style="color:red"> test</span>"` 
)

Вот демо для работающего кода, но, к сожалению, я не могу воспроизвестиошибка.

Хочу отметить, что это мой реальный пример того, что этот код ниже находится внутри заметной подписки

let selectedElms = d3.selectAll('circle')
  .data(data, function(d) {
    console.log(this.id)
    return (d && d.train) || this['id'];
  })

selectedElms
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

  }

Answer 1

Если ваша проблема заключается в том, что всплывающая подсказка не отображается в соответствии с динамическими данными, замените приведенный ниже код, всплывающая подсказка начнет отображаться -

    tip.offset([-10, 0]).html(d => {
      return (
        "<strong>Frequency:</strong> <span style='color:red'>" +
         d.train + "</span>"
       );
     });

Надеюсь, это поможет вам:)