D3.js json error when making tree - javascript

I am trying to make my own tree in D3.js, but I am having trouble figuring out how to make one. I have looked at the following links:
http://bl.ocks.org/1249394#interactive_tree.css
d3js Tree square
and even tried copying them to get something working so that I can tinker, but it won't work for me. I have riddled the code with alerts and in both the pedigree and the collapsible tree the code stops working right after the d3.json call. I copied the json files too and renamed them so that they were the same. In the pedigree example
d3.json("info.json", function(json) {
alert(json);
var nodes = tree.nodes(json);
alert('hi');
So here the first alert works and the second doesn't, and this happens in both examples. If anybody knows why, an explanation or fix would be greatly appreciated. Thanks!!!
I figured out that when d3.json("localhost...", callback) is called it is returning null. I read on another post that there are cross domain restrictions. I am not really sure what that means or how to fix it
I have tried it both locally from the same directory as I am running my application from and I have tried it from my Xamp server. And still when the alert(json) is called it shows null.

The d3 documentation has some more information on this. Basically, your browser will not load a JSON file from the local filesystem or a server that the original page is not on. There are ways around this, for example Google Chrome can be started with --disable-web-security to disable those restrictions, but this is not recommended.
All modern browsers have a Javascript error console that will show you the exact reason for the JSON file not loading. Remember that when you serve the page through a local web server, you shouldn't specify localhost:// or similar in the path of the JSON file, just the path relative to the directory that the HTML file resides in.

Related

How to avoid '#' sign expansion in `vega#3`

In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?

Why don't web workers work?

So, I'm trying to use a web worker in my project to run a long-running process that is currently tying up the UI. I've been to I don't know how many sites trying to get a worker to work, but to no avail.
All of my javascript is kept in separate files and referenced in the HTML file. As a test to get my feet wet, I created a test.js file and put the following code in it:
self.addEventListener('message', function(e) {
self.postMessage('return');},false);
Then, in the UI page's javascript file I placed this code in a function triggered by a button click event:
var w = new Worker('test.js');
w.addEventListener('message',function(e){
alert(e.data);},false);
w.postMessage('hi');
The code is derived from:
html5rocks.com/en/tutorials/workers/basics
Other websites I visited provided similar instructions on how to set up a worker.
For the life of me, I cannot get this to work. When I execute it does absolutely nothing and I seemingly get no errors. Stepping through the code, it appears to create the worker, but I don't see any evidence of the event listener being created and the 'postMessage' event doesn't do anything. I've tried IE11 and Chrome with the same results.
In my research, I came across a part of Chrome's developer tools that revealed the test.js file couldn't be found. Yet, the file is in the same folder as the page's js file. So, I tried adding in the relative directory information as I do in the page's HTML section. That didn't work either.
I then found claims that for security reasons you couldn't have one js file reference another js in the code. It's unclear whether this is a Chrome-only feature or part of some spec.
So, now I'm in a quandary. The worker requires a reference to a separate js file for the code to be executed, yet, the browser isn't allowed to reference another file? How is the worker supposed to work if you aren't allowed to do what it requires to work?
To now, I've successfully pissed away two days trying to get this one seemingly simple function to work. To say I'm mildly frustrated would be an understatement. Being a fairly novice programmer and not understanding every last little nuance about web programming I'm clearly missing a key part of this whole thing.
How the heck is one supposed to make web workers work?
Turns out browsers won't allow local files to be fetched via javascript. Because that means a website can read your personal files! So you need to develop and test your project using a web server. The easiest way to do this for me was to install:
docker-compose
and make sure it works. Then create a file named:
docker-compose.yml
inside root folder of my project with index.html file. Then put this inside the docker-compose.yml file:
version: '3'
services:
nginx:
image: nginx:alpine
volumes:
- .:/usr/share/nginx/html
ports:
- "80:80"
Then inside the root folder of my project run:
docker-compose up
And then in the browser go to:
http://localhost/
And it worked!
I appear to have found a solution, though it escapes me why.
If I use:
var w = new Worker('js\test.js');
the worker doesn't work.
But, if I use:
var w = new Worker('js/test.js');
the worker does work.
I characteristically use the back slash throughout the project to delineate paths without issue. Why the forward slash must be used to set the worker's file location is a mystery. I have seen nothing in any documentation that even remotely addresses that tiny, yet seemingly critical detail.
Thank you, Mr. Starke, for your help!

d3: HTTP404 NOT FOUND error

I have just started learning d3 and am trying to point localhost at the html file I created. It shows a blank page and HTTP404 NOT FOUND error, despite me adding some text to the source code.
Source code
Error message
Please help me figure out what I am doing wrong!
I suspect you have a subdirectory mismatched between your html referencing the d3 Javascript file and the actual location. One simple solution is to replace it with CDN - i.e., get it from a publicly available location instead of your own server. To do that, replace:
src="d3/d3.v3.js"
with:
src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"
for the latest version 4.9.1.

jQuery fails to access a local HTML file | SCRIPT70: Permission denied

I have to implement an existing frameset with JavaScript/jQuery. I´ve embedded the developer version jQuery JavaScript Library v1.9.0.
Every time the right-frame loaded a new HTML-file a function will check the content of this new loaded document. This process will fail sometimes, it´s not possible to understand when (and why) because it occurs randomly.
This is the line which will try to access the frames content:
var Jrightframe = $(iframe.find('frameset#myID frameset frame[name="right"]').get(0).contentWindow.document);
Sometimes, as I said it above, the message will be:
SCRIPT70: permission denied jquery.js, line 3882 character 2
I think it´s a same origin policy problem because I tried this locally (C: partition). But what is the problem to load a file from the partition if the js-script runs on the same partition?
Can somebody please help me to find out what´s going on here?
I searched a long time and found multiple problems like my problem. Ok here is what solved the problem:
Update the jquery core to v1.11.0. It seems only to appear in older versions.

Why the copied HTML doesn't look like the original HTML?

I copied the generated source code (View Source -> View Generated Source in the Firefox Web Developer Toolbar) of Google's Keyword Tool page to a new HTML file.
But, when I open this new file, some of the items looks stretched for some reason:
The original website looks like this:
I guess that Google create some elements and set various attributes using Javascript, but I copied the page after it has been generated. So, why is this difference?
UPDATE 1
The only JS/CSS file, which is not given as a full path, is:
<script language="javascript" src="/cues/cues.js">
I tried replace this with:
<script language="javascript">
Contents of '/cues/cues.js' here
</script>
but it didn't help.
UPDATE 2
In the browser's error console I found the following 2 errors:
Error: com_google_ads_apps_servers_cues_CuesRelease is not defined
Source File: https://adwords.google.com/cues/768DAEDDB2193AB5B05B9C6A01394D78.cache.js
Line: 1
Error: com_google_ads_apps_targetingideas_client_TargetingIdeas is not defined
Source File: https://adwords.google.com/o/Targeting/756D6AF3BB4DD4A68315E34F50C2BC7E.cache.js
Line: 1
Any ideas why these errors appear?
UPDATE 3
Apparently, the reason is that the DOCTYPE declaration is missing. After I added <!DOCTYPE html> to the stretched version, it solved the problem. Can anyone explain why?
When you save a page, you only get the version of HTML served from the server in its original form. Any mods to the DOM made after load using JS will not be part of the save.
EDIT
I could not trace out the exact reason for the error as the code is really cryptic! In any case, if all you want is to be able to reproduce the exact page offline, then you can do a 'save page as..' from your browser (choose web page, complete). I tried this with FF as well as Chrome and it is working fine in both cases. While opening the saved page, it might be best not to use IE as its a certified choker when it comes to even the slightest error in code. :)
The most likely reason for the error is an cross-domain AJAX security exception (fired when the calling client side script and called server side script are from different domains). The 2 variables namely, com_google_ads_apps_servers_cues_CuesRelease and com_google_ads_apps_targetingideas_client_TargetingIdeas seems to be initialized using the return of some AJAX call (which couldn't execute bcoz of the secu excep), and as a result remain as undefined.
You must be missing some css and js which is not on the page but referred from somewhere else.
The most probable reason is that the CSS and the corresponding images that might be referred within it are not getting applied correctly.
Check the paths of the CSS and for the images (background) within the CSS...You might need to correct the paths to fix the issue.

Categories