max and min values from json in d3

Question

I'm following a tutorial of d3 that uses tsv rather than json. I'm more familiar with json so I wanted to apply my own json object to the example.

I found this and tried to apply it but i'm still getting errors: How to use d3.min and d3.max within a d3.json command

Here is my code. I am getting the json object back with my first log. And the correct length with my second log.

Yet I get this error when trying to use d.value in d3.max() Error: Invalid value for attribute width="NaN"

d3.json("sampledata.json", function(error, data) {

            var maxx = d3.entries(data)
                .sort(function(a,b){return d3.descending(a.value, b.value);})

            console.log(maxx)

            console.log(data.length);
            mydata = data;
            x.domain([0, d3.max(data, function(d) { return d.value; })])


chart.attr("height", barHeight * mydata.length);

var bar = chart.selectAll("g")
    .data(mydata)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

// WHERE MY ERROR IS because there is no value for x
bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

});

Answer 1

I think what you need to do, since x is a scale of some kind, is the following:

bar.append("rect")
    .attr("width", function(d) {
       return x(d.value);
    })
    .attr("height", barHeight - 1);

Otherwise it is just going to pass d into x, which isn't going to help you.