Geek asks and answers

Very simple D3.js case study not working

I am new to D3.js. I read "Getting Started with D3" by Mike Dewar. I tried the very first example in the book and it does not work. I tore it up. What is wrong with my code here?

In the section <head>:

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script>
   function draw(data) {
    "use strict";
   d3.select("body")
      .append("ul")
      .selectAll("li")
      .data(data)
      .enter()
      .append("li")
         .text(function (d) {
            return d.name + ": " + d.status;
         });
      }
</script>

In <body>:

<script>

    d3.json("flare.json", draw);

</script>

And the JSON file:

[
{
    "status": ["GOOD SERVICE"],
    "name": ["123"],
    "url": [null],
    "text": ["..."],
    "plannedworkheadline": [null],
    "Time": [" 7:35AM"],
    "Date": ["12/15/2011"]
}
]
+5
source share
4 answers

If you use Chrome, this may prevent you from opening the file properly due to security restrictions between domains. Try Firefox to make sure this is the case (you can probably download the file correctly).

, -, WAMP ( Windows), wiki : https://github.com/mbostock/d3/wiki

.

+5

, , XHR ?

, d3 (v3) VS 2012 Express, XHR :

HTTP 404.3 -

, "", .json .txt .js, : https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension, XHR .

+1

Well, d.name and d.status are both arrays and should just be strings if you want to show their contents, or yo should access the index value 0 of these arrays; Ie, d.name [0] + ':' + d.status [0];

0
source

It could be your JSON. I did the same exercise and it worked fine. Here is my js (I am attached to the div, not the body). I am running a local web server.

d3.json("data/mta001.json", drawli);

function drawli(data) {
    "use strict";
    d3.select('#mta001')
      .append('ul')
      .selectAll('ul')
      .data(data)
      .enter()
      .append('li')
        .text(function (d) {
            return d.name + ': ' + d.status;
      });
    d3.selectAll('#mta001 li')
      .style('color', function (d) {
        if ( d.status == 'GOOD SERVICE') {
            return 'green';
        } else {
            return 'fuchsia';
        }
      });
}

and here is my JSON:

[
        {
          "name": "123",
          "status": "DELAYS",
          "text": "delay text",
          "Date": "12/08/2012",
          "Time": " 1:03PM"
        }
]
0
source

More articles:


All Articles