javascript - 将 d3-tip 与 npm : "Uncaught TypeError: Cannot read property ' node' of undefined"? 一起使用

Question

我已经使用 npm ( d3-tip documentation ) 安装了 d3": "^3.5.17" 和 "d3-tip": "^0.7.1" . 然后在我的 index.js 文件中我有这段代码:

var d3 = require('d3');
var d3tip = require('d3-tip')(d3);
console.log('d3 version', d3.version);
var tip = d3tip().attr('class', 'd3-tip').html(function(d) { return "hello world"; })

但是当我使用 browserify 构建索引文件并将其加载到浏览器中时，我在 var tip 行中看到错误:

index.js:247 Uncaught TypeError: Cannot read property 'node' of undefined

这来自 d3-tip 源代码中的这个函数:

function getSVGNode(el) {
  el = el.node()
  if(el.tagName.toLowerCase() === 'svg')
    return el
  return el.ownerSVGElement
}

看起来这个函数需要一个节点传递给它？但这是从哪里来的呢？

构建本身不会抛出任何错误，我认为我正确地需要 d3-tip，as per this question .正如预期的那样，控制台语句显示 d3 版本 3.5.17。

更新:这是我的 package.json 文件:

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "watchify index.js -o main.js --debug --verbose",
    "build": "browserify index.js | uglifyjs > main.min.js"
  },
  "dependencies": {
    "d3": "^3.5.17",
    "d3-tip": "^0.7.1",
    "datatables.net": "^1.10.12",
    "datatables.net-bs": "^1.10.12"
  },
  "devDependencies": {
    "uglifyjs": "^2.4.10",
    "watchify": "^3.2.1"
  }
}

然后我使用 npm install 安装了这些文件。

Answer 1

发生这种情况是因为我试图将最新版本的 d3-tip(需要 D3 的 v4)与 D3 的 v3 一起使用。

恢复到旧版本的两个固定的东西:

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