Как я могу связать массив объектов с дугами на круговой диаграмме D3?

Question

Как я могу связать массив объектов с дугами на круговой диаграмме D3?

Я строю круговую диаграмму, и мои данные представлены в форме JSON:

[
  {
    "Stage":"birth",
    "Avg":19071
  },
 { 
   //
 }
]

Я не знаю, как мне следует использовать функцию данных, чтобы связать эти данные 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"
  });

Как мне использовать.data, чтобы иметь доступ к каждой паре ключ / значение в json? Извините, если это действительно простой вопрос, но я не могу понять, как работают клавиши в этом случае.

1

javascript d3.js

Источник

user1468810 23 янв '16 в 17:19

1 ответ

Решение

Другие вопросы по тегам javascript d3.js

user16363 23 янв '16 в 18:03 2016-01-23 18:03 · Accepted Answer · 2016-01-23 18:03

Вы должны дать свой layout.pie функция доступа к значению.

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>