After installing d3": "^3.5.17" and "d3-tip": "^0.7.1" via npm (d3-tip documentation), the following code was added to my index.js file:
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"; })
However, upon building the index file with browserify and loading it in the browser, an error is triggered by the var tip line:
index.js:247 Uncaught TypeError: Cannot read property 'node' of undefined
The source of this error can be traced back to a function within the d3-tip source code:
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() === 'svg')
return el
return el.ownerSVGElement
}
It seems that this function expects a node to be passed to it. But where should this node come from?
No errors are thrown during the build process, and I believe I've correctly required d3-tip as described in this question. The console output displays d3 version 3.5.17, confirming the installation.
UPDATE: Below is the content of 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"
}
}
Using npm install, all files were successfully installed.