在D3中访问JSON值

我试图用"正手"/"反手"answers"BH切片"的圆圈填充每个组，但我很难访问这些值。我用"方向"作为键来嵌套元素，所以相关的值最终会影响每个圆的位置和大小。

在某种程度上，它类似于https://github.com/mbostock/d3/wiki/Selections#data矩阵的例子，我猜，但数据结构是不同的?

JSbin的当前代码在这里:http://jsbin.com/gahul/1

我有以下数据:

   var JSONdata = [
            {
                "Direction": "Crosscourt",
                "Total": 118,
                "Forehand": 75,
                "Backhand": 41,
                "BH slice": 2
            }, {
                "Direction": "Down_middle",
                "Total": 50,
                "Forehand": 34,
                "Backhand": 9,
                "BH slice": 7
            }, {
                "Direction": "Down_line",
                "Total": 21,
                "Forehand": 8,
                "Backhand": 11,
                "BH slice": 2
            }, {
                "Direction": "Inside_out",
                "Total": 118,
                "Forehand": 25,
                "Backhand": 5,
                "BH slice": 0
            }, {
                "Direction": "Inside_in",
                "Total": 9,
                "Forehand": 9,
                "Backhand": 0,
                "BH slice": 0
            },
        ];

和以下d3代码:

                var query1 = d3.nest()
                  .key(function(d){
                        return d.Direction;
                      })
                  .sortKeys(d3.ascending)
                  .entries(JSONdata)
                var h = 420;
                var w = 500;
                var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
                var group = svg.selectAll("g")
                  .data(query1)
                  .enter()
                  .append("g")
                  .attr("class", function(d){ return d.key })
               var pop_directions = group.selectAll("circle")
                  .data(query1)
                  .enter()
                  .append("circle")
                  .attr("r", 30 )
                  .attr("cx", 100)