Question

我正在构建饼图，我的数据采用JSON格式：

pie = d3.layout.pie();

arcs = svg.selectAll("g.arc") 
  .data(pie(data)) // ?
  .enter()
  .append("g")
  .attr({
    "transform" : "translate(" + outerRadius + "," + outerRadius + ")",
    "class": function(d,i){
      console.log(d3.keys(d));
    }       
  });

pie.sort(null);

//Draw arc paths  
arcs.append("path")
  .attr({
    "d": arc,
    "class" : "arc"
  });

我不知道应该如何使用数据函数将json数据绑定到我的选择中。所以这对我不起作用：

getpeername

如何使用.data以便我可以访问json中的每个键/值对？很抱歉，如果这是一个非常简单的问题，但在这种情况下我无法理解密钥是如何工作的。

Answer 1

您需要提供layout.pie value accessor个功能。

var pie = d3.layout
  .pie()
  .sort(null)
  .value(function(d){
    return d.Avg; //<-- d3 will pie the values in Avg property
   });

完整的工作样本：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <script>
    var data = [{
      "Stage": "birth",
      "Avg": 19071
    }, {
      "Stage": "death",
      "Avg": 10000
    }];
    
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
      
    var colors = d3.scale.category10();

    var pie = d3.layout
      .pie()
      .sort(null)
      .value(function(d) {
        return d.Avg;
      })

    var arc = d3.svg.arc()
      .outerRadius(90)
      .innerRadius(0);

    var arcs = svg.selectAll("g.arc")
      .data(pie(data)) //<-- this is fine
      .enter()
      .append("g")
      .attr({
        "transform": "translate(" + 100 + "," + 100 + ")",
        "class": function(d, i) {
          return d.data.Stage; //<-- after pieing the data, the raw data is then in the data property
        }
      });

    //Draw arc paths  
    arcs.append("path")
      .attr({
        "d": arc,
        "class": "arc"
      })
      .style('fill', function(d,i){
        return colors(i);
      })
  </script>
</body>

</html>

如何将对象数组绑定到D3饼图中的弧？

1 个答案: