Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Failing to load page

    Hi,

    Apologies for the rather generic title, but I'm having a problem starting a project with d3.js that I've spent hours trying to resolve and am at a total dead-end with.

    I'm simply trying to start by getting this code to function for myself...

    http://bl.ocks.org/mbostock/1093025

    (of course not to steal, repurpose etc, but to start better understanding how to manipulate tree structures with d3.js)

    I have an index.html file containing exactly the code on the link above, and a flare.json file in the same directory. But when I open the page it appears completely blank.

    Would hugely appreciate any help on this. Thanks,

    Dan

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    does the error console tell you anything?

    I get an "Object doesn't support this property or method" error on line 3080 of http://d3js.org/d3.v2.js in IE8, which causes the demo page to load blank.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi xelawho,

    Oh, good point, for the demo that's hosted on the site itself I see no issues (on any browser), but when I use the Google Chrome console on the locally run index.html I see the following 3 remarks...

    XMLHttpRequest cannot load file:///Users/danweb/Documents/Website/flare.json. Cross origin requests are only supported for HTTP. d3.js:385
    d3.xhr d3.js:385
    d3.text d3.js:395
    d3.json d3.js:398
    (anonymous function)

    Uncaught TypeError: Cannot set property 'x0' of null index.html:59
    (anonymous function) index.html:59
    (anonymous function) d3.js:399
    ready d3.js:389
    req.onreadystatechange d3.js:383
    d3.xhr d3.js:385
    d3.text d3.js:395
    d3.json d3.js:398
    (anonymous function) index.html:57

    Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 d3.js:385
    d3.xhr d3.js:385
    d3.text d3.js:395
    d3.json d3.js:398
    (anonymous function)

    For the first one it sounds like I can't reference a json file locally? Is that right?

    For the other 2 I'm a little confused since they're relating to scripts that I haven't edited in any way.

    Thanks so much for the help!

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    Quote Originally Posted by danweb View Post
    For the first one it sounds like I can't reference a json file locally? Is that right?
    I think that's correct in Chrome, being that it appears that the code accesses the json file via XMLHttpRequest. As I recall, firefox allows you to do this, so that would be the first thing to check.

    The other would be to upload all the files to your server (not rely on remote hosting at d3js.org at all) and see if it persists.

    I think once you get rid of the first error the other two will disappear.

    Odd that my IE doesn't like it but yours doesn't have a problem - which version are you using, and are you looking at this page?

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again for the help. I just tried this locally again using MAMP this time and it works (on all browsers!) - meaning I can see the page you linked to in your last comment.

    What's weird is that when I upload index.html and flare.json to the FTP server that fasthosts have provided me with, I get the same problem of a completely blank page. Perhaps my hosting doesn't allow this?

    Oh well, at least I have a way of playing with this now. Any further thoughts on the remote server problem would be appreciated though!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    I have no idea if this is the problem, but index.html relies on two remote scripts:
    Code:
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
    if you host them on your server, too, do you still have the same problem?

    and if all else fails, can you provide a link to your live page?

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by xelawho View Post
    I have no idea if this is the problem, but index.html relies on two remote scripts:
    Code:
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
    if you host them on your server, too, do you still have the same problem?

    and if all else fails, can you provide a link to your live page?
    script can come from anywhere. unless the script sniffs it's own src, server location doesn't matter.

    it's more likely that some other resource needs to be server locally, a xml, svg, or json file that the program uses.

    look for 404s in the chrome inspector's network panel, and make any errors or re-directs go bye-bye.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks all for the help; this is working beautifully now and I'm having great fun playing around with it. I do have 2 questions though that I'm suspecting relate more to my understanding of javascript than anything else.

    1) I can't really figure out how to fire a node-specific action - for example, there must be some point in the code for index.html where I could say, "if the user clicks node x, then display an alert message"

    2) assuming 1 is possible, how/where could I discover the various actions that are triggerable - e.g. could I use the click action of a particular node to play an audio file?

    Thanks again for any help at all!

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    you can inspect the html that the code creates by right clicking in Chrome and selecting "inspect element"

    an example of what you see is:

    Code:
    <g class="node" transform="translate(25,20)" style="opacity: 1;">
    <rect y="-10" height="20" width="768" style="fill: #c6dbef;"></rect>
    <text dy="3.5" dx="5.5">analytics</text>
    </g>
    so if you wanted to apply the same action to all similar nodes, you could do

    Code:
    var txts = document.getElementsByTagName("text");
    for (var i = 0; i < txts.length; i++) {
    txts[i].onclick=function(){alert("you clicked "+this.innerHTML)}
    }
    (provided that you run that code after the html has been assembled)

    being that they are standard (or somewhat standard) html elements, you can use any mouse event to fire your function. What you put in your function is up to you - of course you can use it to play an audio file.

  • #10
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks again xelawho. The thing is, I want to have the code in the html right from the outset. for example, I'm looking at the "source.append" fragment which you can see by simply viewing the source html. I can simply add something like this to fire an action each time any node is clicked...

    .on("click", alert('node has been clicked'));

    But I want to be able to fire that action only for certain nodes (not every one), and for others I want to be able to fire different actions (or no actions at all). Hope I'm explaining that ok, but basically the problem is that I can't currently be node-specific.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    Quote Originally Posted by danweb View Post
    But I want to be able to fire that action only for certain nodes (not every one), and for others I want to be able to fire different actions (or no actions at all). Hope I'm explaining that ok, but basically the problem is that I can't currently be node-specific.
    ummm... well you will have to decide at some point which nodes do what, and then find attributes in the nodes that you can use to tell the code to perform the specific actions.

    If you provide a little more detail (even using that demo page as a hypothetical) we could get a little more specific... otherwise it's impossible to go beyond generalities...

  • #12
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so for example, in demo page, if I'd like to be able to see an alert message that said "you clicked on MergeEdge" when the user clicks on "flare->analytics->cluster->MergeEdge" but "you clicked on SpanningTree" when the user clicks on "flare->analytics->graph->SpanningTree"

    Pretty sure if I understood how to do that I could start playing with every possible node-action combination. Thanks so much again for the advice.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    so you want the alert when you click on the pink (or is that salmon?) ones, but not when you click on the blue ones?

  • #14
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well not all of the pink/salmon ones, just the 2 specific nodes I mentioned (with specific messages) - all the other pink/salmon nodes shouldn't give any alerts. Thanks!

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    in that case you could make your click function look like this:

    Code:
    // Toggle children on click.
    function click(d) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
    	  }
    	switch(d.name){
    	case "MergeEdge":
    	alert("you clicked on MergeEdge")
    	break;
    	case "SpanningTree":
    	alert("you clicked on SpanningTree")
    	break;
    	}  
      update(d);
    }
    which is a simple example and if you were to have two nodes with the same name you might get into trouble, but maybe that will be a start.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •