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"

Answer 2

你的行

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

必须是

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

您可以查看我的实施@：

Source（行：17,91,333-339,685-692）

Demo

Answer 3

问题在于您的界限：

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

您不应该使用d3引用本身调用d3.tip（foo），而是使用d3 选择（然后可以调用.node()）。

我认为这应该是：

d3.tip = require('d3-tip');

在npm中使用d3-tip：“未捕获的TypeError：无法读取未定义的属性'节点'？

3 个答案: