添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I've installed d3": "^3.5.17" and "d3-tip": "^0.7.1" using npm ( d3-tip documentation ). Then in my index.js file I have this code:

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

But when I build the index file with browserify and load it in the browser, I see an error from the var tip line:

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

This is coming from this function in the d3-tip source code:

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

It looks like this function is expecting a node to be passed to it? But where would this come from?

The build itself does not throw any errors, and I think I'm requiring d3-tip correctly, as per this question. The console statement shows d3 version 3.5.17, as expected.

UPDATE: Here's my package.json file:

"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"

And I installed the files with npm install.

It could be that youre directly passing a value in the .html() function instead of a function, so that d3-tip is trying to pass this value on to a node on initialization, which it doesnt have. Try using .html(function(d) { return "hello world"; }); – Craicerjack Oct 17, 2016 at 16:02 @davcs86 I've cut the whole file down so it's just the four lines above, still throwing the same error. – Richard Oct 17, 2016 at 16:09

This was happening because I was trying to use the latest version of d3-tip (which requires v4 of D3) with v3 of D3.

Reverting to older versions of both fixed things:

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

Your line

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

must be

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

You can check my implementation @:

Source (Lines: 17, 91, 333-339, 685-692)

Thanks, OK, now I'm really confused :) I can see it's working for you, but the exactly equivalent code still throws the same error for me! Might nuke package.json and node_modules and start again from scratch... – Richard Oct 17, 2016 at 16:42

You should not be calling d3.tip(foo) with the d3 reference itself, but with a d3 selection (which it can then invoke .node() on).

I think this should probably be:

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

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.