javascript - How do you retrieve the key values of a nested data set in D3 - Stack Overflow

I've used the nest() in d3js to group a bunch of insects by Pain Index, but am having trouble accessing a property. There's a similar question on SO, but I keep getting undefined instead of the property name and value. This is the data I'm dealing with:

Array[6]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object //expanded below
       key: "4"
       values: Array[3]
       0: Object
          Insect: "Tarantula Hawk" // I'm trying to access this object inside an object
          PainIndex: "4"

I thought something like this would work since d.values gives you an array organized by PainIndex, but this prints undefined in my console:

var eachPain = d3.values(data_group).map(function(d){console.log(d.values); return d.values.Insect})

I'm curious to know how to access either the Insect or PainIndex properties. Any help is very apprecitaed

I've used the nest() in d3js to group a bunch of insects by Pain Index, but am having trouble accessing a property. There's a similar question on SO, but I keep getting undefined instead of the property name and value. This is the data I'm dealing with:

Array[6]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object //expanded below
       key: "4"
       values: Array[3]
       0: Object
          Insect: "Tarantula Hawk" // I'm trying to access this object inside an object
          PainIndex: "4"

I thought something like this would work since d.values gives you an array organized by PainIndex, but this prints undefined in my console:

var eachPain = d3.values(data_group).map(function(d){console.log(d.values); return d.values.Insect})

I'm curious to know how to access either the Insect or PainIndex properties. Any help is very apprecitaed

• javascript
• d3.js

Share Improve this question Follow asked Dec 24, 2016 at 0:31 I LikeI Like 1,84722 gold badges3131 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

values is an array. Looks like you want the first instance. Try this:

var eachPain = d3.values(data_group).map(function(d){ return d.values[0].Insect });

EDIT:

var eachPain = d3.values(data_group).map(function(d) {
  return d.values.map(function(v) { return v.Insect; }).join(', ');
});

Just to add some more information, besides the one in the accepted answer:

If you want to get a specific insect, and if you know it's position in the array (as you seem to do), this is what you need:

var someInsect = data_group[i].values[j].insect;
         //outer object ----^         ^---- inner object

In this variable, the index i refers to the outer object, with all insects with a given level pain. Then, inside it, the index j refers to the inner object, with a specific insect.

For instance, check this following demo (I'm using a <pre> to load the data), where I get the data and nest it the way you did. In this demo, to get the tarantula hawk, I'm using:

var someInsect = data_group[0].values[1].insect;

var data = d3.csvParse(d3.select("#data").text());

var data_group = d3.nest()
    .key(d => d.painIndex)
    .entries(data);

var someInsect = data_group[0].values[1].insect;

console.log(someInsect);

pre {
    display: none;
}

<script src="https://d3js/d3.v4.min.js"></script>
<pre id="data">insect,painIndex
fire ant,4
honey wasp,1
warrios wasp,3
paper wasp,1
velvet ant,2
tarantula hawk,4
bullet ant,4</pre>

Of course, that variable will change according to the insect you want.

Another possibility is getting the pain level of any insect you want by name. In your nested array, that can be done with:

var filtered = [].concat.apply([], data_group.map(function(d) {
    return d.values
})).filter(function(d) {
    return d.insect === myInsect
})[0].painIndex;

Where myInsect holds the name of the insect you'll use in the filter.

Check this other demo, where we get the pain value of the tarantula hawk:

var data = d3.csvParse(d3.select("#data").text());

var data_group = d3.nest()
    .key(d => d.painIndex)
    .entries(data);

var myInsect = "tarantula hawk"

var filtered = [].concat.apply([], data_group.map(function(d) {
    return d.values
})).filter(function(d) {
    return d.insect === myInsect
})[0].painIndex;

console.log(filtered);

pre {
	display: none;
}

<script src="https://d3js/d3.v4.min.js"></script>
<pre id="data">insect,painIndex
fire ant,4
honey wasp,1
warrios wasp,3
paper wasp,1
velvet ant,2
tarantula hawk,4
bullet ant,4</pre>

Of course, all of this (getting the key values, get the value depending on other value etc...) would be way easier if you used your original array, instead of the nested one.