D3 条形图上的条形未显示

Question

I've been staring at this code for hours now and maybe it's obvious or just needs a fresh set of eyes, but I am desperate to figure out why the bars on the graph aren't showing up??

Here is the fiddle for it: http://jsfiddle.net/u7zs3jwo/1/

Here's the JSON:

var bardata = [
   {
      "ts":1431728734,
      "interval":12,
      "method":"GET",
      "host":"beta.familysearch.org",
      "aggs":{    
         "con":{     //Connect
            "25":6,
            "50":6,
            "75":6,
            "90":7.1,
            "95":7.55,
            "99":7.91,
            "mn":6,
            "mx":8,
            "avg":6.3,
            "stddv":0.67
         },
         "count":10,
         "srvbsy":{     
            "25":2100.75,
            "50":2272,
            "75":3038.25,
            "90":3571.4,
            "95":3627.2,
            "99":3671.84,
            "mn":920,
            "mx":3683,
            "avg":2452.6,
            "stddv":836.3
         }
      }
   }
];

Thank you in advance for any help!!!

Answer 1

The data passed in to D3 must be in the form of an array. As your code stands you are passing in a single value. I am answering with the assumption that you only want to plot a single bar, the value of 'mx'.

Simply by changing your code like below, the line shows up.

Change the value passed in to be an array.

bardata = {
    ...
    "mx":[3683],
    ...
}

And change the scale function to use the first index of the 'mx' array.

var vGuideScale = d3.scale.linear()
    .domain([0, bardata[i].aggs.srvbsy.mx[0]]) // <-- here
    .range([height, 0])

http://jsfiddle.net/u7zs3jwo/2/