D3.js d3.max undefined

Question

This is my first question and I am completely new to the wonderful d3.js. I am trying to make a choropleth map from a geojson file with 12 objects and lots of properties.

I want to calculate the domain for colorscale (quantize) by d3.min and d3.max, but something must be wrong. The min and max values ​​are still undefined (if I believe my webinspektor). Everything works fine with Numbers in domain tags.

Hope someone can help me. Thanks for every reply.

Here is my code:

d3.json("IKSK_LK_Goe_31463.json", function (collection) { overlay.afterAdd = function () { // Add the container when the overlay is added to the map. color.domain([ //1,30 d3.min(collection, function(d) {return d.features.properties.EINWOHNER;}), d3.max(collection, function(d) {return d.features.properties.EINWOHNER;}) ]); console.log(d3.max(collection, function(d) {return d.features.properties.EINWOHNER;})); 

Answer 1

As others have already mentioned, the input to d3.max must be an array. Make sure the input is not an object if it creates an array of values ​​using d3.values ​​(collection);

 var collection = { '01': { foo: 'bar', value: 10 }, '02': { foo: 'baz', value: 20 } }; var collection_array = d3.values(collection); // --> [{ foo: 'bar', value: 10 }, { foo: 'baz', value: 20 }] d3.max(collection_array, function (d) { return d.value}); // --> 20 

Good luck

/ Wille

Answer 2

If d.features.properties.EINWOHNER is an integer value, or you want to extract an integer value from it (how the minimum and maximum make sense), add '+' in front of it:

  d3.min(collection, function(d) {return +d.features.properties.EINWOHNER;}), d3.max(collection, function(d) {return +d.features.properties.EINWOHNER;})]); 

Answer 3

adding + in front of your numeric variable may help, as others have mentioned.

Big and simple d3 function to get min / max and use it as a domain

d3.extent (array [, accessor])

Returns the minimum and maximum value in the given array using natural order. This is equivalent to calling d3.min and d3.max at the same time.

therefore color.domain (d3.extent (...)) will also set the domain correctly.

hope this helps :)

Answer 4

Use something like this:

 var xx = [{x:'one',y:1}, {x:'two',y:2}]; //array var maxOfY = d3.max(xx, function(d){ return dy;});