ошибка при использовании словаря в качестве входных данных в круговой диаграмме - PullRequest
Новая
       12

ошибка при использовании словаря в качестве входных данных в круговой диаграмме

0 голосов
/ 27 января 2019

Я хочу дать вывод круговой диаграммы со значениями переменной age_group, но это не дает. Переменная pie неправильно вызывает значения, но я не знаю, как еще это сделать. 

var margin = {top:20, right:20, bottom:20, left:20},
            width = 500 - margin.right - margin.left,
            height = 500 - margin.top - margin.bottom,
            raio = width/2;
        
        var color = d3.scaleOrdinal()
            .range(["#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2"]);
        
        var sex = [];
        var item_sex = {
            f : 0,
            m : 0,
        };

        var age_group = [];
        var item_age_group = {
            age_group5_14 : 0,
            age_group15_24 : 0,
            age_group25_34 : 0,
            age_group35_54 : 0,
            age_group55_74 : 0,
            age_group75 : 0,
        };

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        //arcos
        var arco = d3.arc()
            .outerRadius(raio - 10)
            .innerRadius(0);
        
        var labelArc = d3.arc()
            .outerRadius(raio - 40)
            .innerRadius(raio - 40);
        
        var pie = d3.pie()
            .sort(null)
            .value(function(d) { 
                return d.item_age_group;
             });    

        d3.csv("master.csv", function(error, data) {
            if (error) throw error;
                        
            data.forEach(function(d){
                sex = d.sex;
                age_group = d.age;

                //contabilixar genero
                if (sex === 'male')
                    item_sex.m += 1;
                if (sex === 'female')
                    item_sex.f += 1;

                //contabilizar faixa etária
                if (age_group === '5-14 years')
                    item_age_group.age_group5_14 +=1;
                if (age_group === '15-24 years')
                    item_age_group.age_group15_24 +=1;
                if (age_group === '25-34 years')
                    item_age_group.age_group25_34 +=1;
                if (age_group === '35-54 years')
                    item_age_group.age_group35_54 +=1;
                if (age_group === '55-74 years') 
                    item_age_group.age_group55_74 +=1;
                if (age_group === '75+ years')
                    item_age_group.age_group75 +=1;
            });

            console.log(item_sex);
            console.log(item_age_group);

            var g = svg.selectAll(".arc")
                .data(pie(data))
                .enter().append("g")
                .attr("class", "arco");
            

            g.append("path")
                .attr("d", arco)
                .style("fill", d.item_age_group)
                // transition 
                .transition()
                .ease(d3.easeLinear)
                .duration(2000)
                .attrTween("d", tweenPie);
        });  

        function tweenPie(b) {
            b.innerRadius = 0;
            var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
            return function(t) { return arco(i(t)); };
            }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: rgb(134, 44, 59);
  color: white;
}

h1 {
    font-family: serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 52px;
    color: rgb(37, 5, 15);      
    }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


</style>
</head>
<body>

<div class="topnav">
        <a class="active" href="index.html">Home</a>
        <a href="mapa.html">World Mapa</a>
        <a href="evolucaoAno.html">Evolucion</a>
        <a href="pieChart.html">Sex and Age group</a>
    </div>

<body><br><br>

<h1 style="text-align: center">Sex and Age group</h1>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>

    <script>
            

    </script>

</body>
</html>

Файл master.csv - это большой файл. Ниже я показываю первые 2 строки 16384, остальные идентичны второй строке. 

country,year,sex,age,suicides_no,population,suicides_100k_pop,country_year,HDI_for_year, gdp_for_year ,gdp_per_capita,generation
Albania,1987,male,15-24 years,21,312900,6.71,Albania1987,,"2,156,624,900",796,Generation X

1 Ответ

0 голосов
/ 27 января 2019

Вы можете проверить свой класс "arco" в вашем g.group 

var g = svg.selectAll(".arc")
           .data(pie(data))
           .enter().append("g")
           .attr("class", "arco"); // here

Может быть, вы забыли свойство css для класса "arco".Вам нужно добавить .arc или .arco в вашем CSS. 

var data = [10, 20, 100];

var width = $('#chart-container').width(),
    height = $('#chart-container').height(),
    radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal()
    .range(["#ffeda0", "#feb24c", "#f03b20"]);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d; });
    
var svg = d3.select("#chart-container").append("svg")
            .attr("width", width)
            .attr("height", height)
          .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
           .data(pie(data))
          .enter().append("g")
          .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.data);});

g.append("text")
  .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .text(function(d) { return d.data; });
#chart-container {
  width: 200px;
  height: 150px;
  background: #e0e0e0;
  border: 1px solid #000;
}
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
  font-weight: bold;
}

.arc path {
  stroke: #000;
  stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div id="chart-container"></div>
</body>
...