将 d3-tip 与 require js 模块一起使用

Question

我一直在努力让 d3-tip 与 browserify 一起工作。我收到以下 javascript 错误：

Uncaught TypeError: Cannot read property 'show' of undefined

这是我的设置。 package.json 具有以下依赖项：

"d3": "3.5.17"
"d3-tip":"^0.6.7"

在我的 javascript 我有：

var d3tip = require('d3-tip')(d3);

我创建了一个提示：

var tip = d3tip();

tip.attr('class', 'd3-tip')
   .offset([-10, 0])
   .html(function(d) {
        return "Hello" ;
    });

然后我附上tip show and hide到一个出现错误的栏：

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

如有任何帮助，我们将不胜感激。

Answer 1

您需要将笔尖应用于选区，例如

var d3tip = require('d3-tip')(d3);

var tip = d3tip();

tip.attr('class', 'd3-tip')
   .offset([-10, 0])
   .html(function(d) {
        return "Hello" ;
    });

var selection = d3.select('.node');

selection
  .call(tip) // <=== here
  .on('mouseover', tip.show)
  .on('mouseover', tip.hide)

将 d3-tip 与 require js 模块一起使用

Using d3-tip with require js modules

d3.js

browserify