Question

我已经开发了这段代码，我似乎无法摆脱障碍。我究竟做错了什么？变量的大小会很大吗？ sum的值介于52264和2452141之间。

我是这些陌生人的新手。

            var margin = {top:5, right:10, bottom:100, left:100},
                width = 700 - margin.right - margin.left,
                height = 500 - margin.top - margin.bottom,
                radius = width/2;

            // o g para agrupar objetos juntos, agrupar as barras
            var svg = d3.select('body')
                .append('svg')
                .attr({"width" : width + margin.right + margin.left,
                    "height" : height + margin.top + margin.bottom
                })
                .append("g")
                .attr("transform", "translate(" + margin.left +"," + margin.right + ")");

                //console.log(svg)

            //definição da posição do eixo xx e yy
            var x_scale =  d3.scale.ordinal()
                .rangeRoundBands([0, width], 0.5, 0.5);
                //console.log(x_scale)

            var y_scale = d3.scale.linear()
                .range([height, 0]);

                //console.log(y_scale)

            //axis, definição do conteudo dos eixos
            var x_axis = d3.svg.axis()
                .scale(x_scale)
                .orient("bottom");

                //console.log(x_axis)

            var y_axis = d3.svg.axis() 
                .scale(y_scale)
                .orient("left");

            //manipulação dos dados do ficheiro
            d3.csv("master.csv", function(error, data) {
                if (error) throw error;
                            
                data.forEach(function(d){
                    d.age = d.age;
                    d.suicides_no = +d.suicides_no;
                });
                //console.log(data[0]);

                var ageSuicides = d3.nest()
                    .key(function(d){return d.age; })
                    .rollup(function(leaves){
                        var sum = 0;
                        leaves.forEach(function(d){
                            sum += d.suicides_no;
                        })
                        return sum
                        ;})
                    .entries(data);
                
                console.log(ageSuicides);

                x_scale.domain(data.map(function(d){return d.age;}));
                y_scale.domain([52000, 2452500]); //definido de acordo com os valores

                //grafico (representação dos valores)
                svg.selectAll('rect')
                    .data(ageSuicides)
                    .enter()
                    .append('rect')
                    .attr("height", 0)//de onde devem surgir as barras (no eixo com a altura height)
                    .attr("y", height)
                    // .transition().duration(3000)
                    // .delay(function(d,i) {return i * 200;})
                    .attr({
                        'x': function(leaves){ return x_scale(d.data.age);},
                        'y': function(leaves){ return y_scale(leaves.values);},
                        "width": x_scale.rangeBand(),
                        "height": function(d) { return height - y_scale(leaves.values);}
                    })
                    .style("fill", function(d,i) { return 'rgb(20, ' + ((i*30) + 100) + ', 20)'});
                    
                    console.log(function(d){return d.data.sex;})

                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(x_axis)
                        .selectAll('text')
                        .attr("transform", "rotate(-60)")
                        .attr("dx", "-.8em")
                        .attr("dy", ".25em")
                        .style("text-anchor", "end")
                        .style("font-size", "14px"); 
                    
                    svg.append("g")
                        .attr("class", "y axis")
                        //.attr("transform", "translate(0," + width + ")")
                        .call(y_axis)
                        .style("font-size", "14px");

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;
  }
  
  IMG.displayed {
              display: block;
              margin-left: auto;
              margin-right: auto 
  }
  
  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">
    
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <div class="topnav">
            <a class="active" href="index.html">Home</a>
            <a href="mapa.html">Mapa mundo</a>
            <a href="evolucaoAno.html">Evolucao por ano</a>
            <a href="pieChart.html">Genero</a>
            <a href="barchart.html">Faixa Etaria</a>
        </div>

    <h1 style="text-align: center">Faixa etaria e numero de suicidios</h1>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

        <script>
  

        </script>

    </body>
</html>

Answer 1

解决方案非常简单。稍等一下。

svg.selectAll('rect')
                    .data(ageSuicides)
                    .enter()
                    .append('rect')
                    .attr("height", 0)
                    .attr("y", height)
                    .transition().duration(3000)
                    .delay(function(d,i) {return i * 200;})
                    .attr({
                        'x': function(d) { return x_scale(d.key); }, 
                        'y': function(d){ return y_scale(d.values);},
                        "width": x_scale.rangeBand(),
                        "height": function(d) { return height - y_scale(d.values);}
                    })
                    .style("fill", function(d,i) { return 'rgb(20, ' + ((i*30) + 100) + ', 20)'});

d3中的条形图。使用大数据

1 个答案: