Javascript 在D3中访问JSON值

我试图用一个圆圈来填充每组的“正手”/“反手”和“BH切片”，但我很难访问这些值。我嵌套元素的方式是“方向”是关键，因此相关值最终会影响每个圆的位置和大小

在某种程度上，它类似于矩阵示例，但数据结构不同

当前代码的JSbin在此处：

我有以下数据：

   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)

---

新对象的值位于具有一个元素的数组中，您必须处理该元素，例如：

d.values[0].Forehand

为您提供正手值，而您可以通过

d.key

---

有关使用正手值作为半径和标题的简单示例，请参见。

Aha，有道理！谢谢赫伯特！