Question

我试图用＃34;正手＆＃34;圈子填充每个群组。 /＆＃34;反手＆＃34;和＆＃34; BH切片＆＃34;但是我在访问这些值时遇到了困难。我已经按照＆＃34;方向＆＃34;的方式嵌套元素。是关键，因此相关值最终会影响每个圆的位置和大小。

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

我有以下数据：

   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)

Answer 1

新对象的值位于包含一个元素的数组中，您必须对其进行处理，例如：

d.values[0].Forehand

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

访问键值

d.key

请参阅http://jsbin.com/hakamoga/1/edit以获取使用正手值作为半径和标题的简单示例。

在D3中访问JSON值

1 个答案: