How to access JSON using d3.js

Question

Can't seem to find the answer to this question.

Does d3.js need the data to be in a particular format. For example:

var dataset = {
"people": [
  {
    "name": "person1",
    "projects": [
      {
        "name": "project1"
      },
      {
        "name": "project3"
      }
    ]
  },
  {
    "name": "person2",
    "projects": [
      {
        "name": "project1"
      },
      {
        "name": "project2"
      }
    ]
  }
 ]
};

And then using this:

d3.select('body')
.selectAll('p')
  .data(dataset)
  .enter()
  .append('p')
  .text(function(d){
    return d;
  });

Will not return anything.

Hope someone can help.

The docs and other tutorials all say you can use the above but always use the array as an example/demo.

The argument to .data() needs to be an array. See: github.com/mbostock/d3/wiki/Selections#data — Mike Atkins
– Mike Atkins, Commented Feb 19, 2015 at 18:15

Plato · Accepted Answer · 2015-02-19 18:18:53Z

3

As @MikeAtkins says you are trying to data bind the outer object. Try:

var dataset = {
"people": [
  {
    "name": "person1",
    "projects": [
      ...
    ]
  },
  ...
 ]
};

d3.select('body')
.selectAll('p')
  .data(dataset.people)
  .enter()
  .append('p')
  .text(function(d){
    return d.name;
  });

If you want to bind to the NESTED arrays (i.e. each project for each person) you should see this tutorial.

answered Feb 19, 2015 at 18:18

Plato

11.1k2 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access JSON using d3.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related