I cannot scale my font-size with D3 domain and range...?

Question

I am looking to scale the book 'titles' in my below dataset depending on the number of 'weeks' that they have been on a best-sellers list...so if it is a book's 1st week on the list, the title will appear in 18pt, and if it is the book's 20th week on the list (or the maximum number that week) the title will appear in 72pt.

E.g. of my dataset:

        var hardcover_fiction = [
            {
                title: "MISSING YOU",
                author: "Harlan Coben",
                rank: 1,
                last: 0,
                weeks: 1
            },
            {
                title: "RAISING STEAM",
                author: "Terry Pratchett",
                rank: 2,
                last: 0,
                weeks: 20
            }
        ];

E.g. of my D3 code:

            .style("font-size", function(d) { 
                return textScale(d.weeks) + "px";
            })


    var textScale = d3.scale.linear()
                              .domain([1, d3.max(hardcover_fiction.weeks)]
                              .range([18, 72]);

I'm pretty stumped...any help would be very much appreciated! :)

Answer 1

You're using d3.max incorrectly. The first argument has to be an array. The second (optional) argument is a function to extract the relevant value from each element in the array.

The call d3.max(hardcover_fiction.weeks) returns 0 because hardcover_fiction.weeks doesn't exist. You need

d3.max(hardcover_fiction, function(d){return d.weeks;})

The rest of your code snippet should work as expected.