使用 d3-tip 的工具提示未显示

Question

我正在尝试使用 Angular、d3 v4、d3-tip 在 svg 中实现工具提示。

这是 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>"` 
)

这是一个 demo 代码，但不幸的是我无法重现该错误。

我想提一下，这是我的真实示例，下面的代码位于可观察订阅中

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>"
       );
     });

希望对你有帮助:)