Code returns undefined from dataset

1

I am trying to learn how to use a new library, Labella. It basically does all the underlying manipulation of SVG elements in a data visualization so they don’t overlap each other on the webpage.

In order to understand how it works, I wanted to first recreate one of their demos.

This is their demo: http://twitter.github.io/labella.js/with_text.html

And this is my recreation: https://codesandbox.io/s/frosty-dew-1c7kq

I am getting stuck at this line:

var bbox = dummyText.text(labelText(movie))[0][0].getBBox();

Even though I copy/pasted the demo’s dataset into my own code, the dummyText.text(labelText(movie))[0] is returning undefined. So of course, dummyText.text(labelText(movie))[0][0]. is also undefined and getBBox() errors out.

Why does my code return undefined from the exact same dataset that demo has…?

Thank you!

2

When I look in your sandbox, it is complaining in main.js that d3 is not defined. I’m assuming that that needs to be installed and imported to be accessible in main.js.

3

hi @kevinSmith , can you let me know where you see that? I had updated dependencies to include d3 and I just double-checked it. It’s definitely there. I checked the console, problems, and ReactDevTools tabs (in Codesandbox) just in case and there were no errors in either.

4

Ah OK, I see the underlined red code. But that doesn’t make any sense since the library is there…??

Edit: I also added it via CDN just in case…to no avail.

5

Realize that there is a difference between scripting in a package in your HTML (which you are doing here) and providing it to webpack (or whatever) in the package.json (which you are also doing). Since you are bundling everything in a node/webpack environment, the individual JS files need to know what they are importing so the compiler knows what “d3” means in the context of the file. I would expect to see something like:

import d3 from 'd3';

or

const d3 = require('d3');

at the top of the file. Otherwise, within the context of that file, that file has no idea what d3 is.

6

So this is a little confusing - and probably not the right way to go about this - but I had originally downloaded the d3.min.js library into a folder in my own project and was using it just fine by adding it in via HTML page.

But when I wanted to use the Labella library, the only way I could incorporate it into my project (as far as I could tell) was to use package manager, so I did an init npm and then ran npm install labella --save.

That’s how I ended up with both script in HTML file and package.

I thought about using npm to install d3 so they’re consistent but ran into other problems:

C:\Users\sabahat iqbal\Dropbox\PROJECT - Data Dashboards\Data4Pakistan_SlopeGraphs>npm i d3
npm WARN Data4Pakistan_SlopeGraphs@1.0.0 No description

npm ERR! code EBUSY
npm ERR! syscall rmdir
npm ERR! path C:\Users\sabahat iqbal\Dropbox\PROJECT - Data Dashboards\Data4Pakistan_SlopeGraphs\node_modules\.staging
npm ERR! errno -4082
npm ERR! EBUSY: resource busy or locked, rmdir 'C:\Users\sabahat iqbal\Dropbox\PROJECT - Data Dashboards\Data4Pakistan_SlopeGraphs\node_modules\.staging'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\tmp\nodejs\npm-cache\_logs\2020-07-30T18_01_59_861Z-debug.log
7

Putting the issues with Codesandbox aside, the solution to original issue was fixed by traversing the data structure correctly:

var bbox = dummyText.text(labelText(movie))._groups[0][0].getBBox();

Instead of:

var bbox = dummyText.text(labelText(movie))[0][0].getBBox();