Нарисуйте график рассеяния с d3 - PullRequest
Новая
       28

Нарисуйте график рассеяния с d3

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

У меня есть это, и мне нужно увидеть график графика разброса жанров.Я знаю, что я немного тупой, но я пока не знаю, как хорошо играть, нет.Одна из осей все еще появляется, если выполнена.Этот код дан учителем, чтобы исправить нас, я уже кое-что получил, но ничего из этого не понимаю. 

var margin = {top: 20, right: 10, bottom: 100, left: 40};
        var width = 700 - margin.right - margin.left;
        var height = 500 - margin.top - margin.bottom;

        // 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 + ")");

        //definição da posição do eixo xx e yy
        var x_scale =  d3.scaleLinear()
            .range([0, width])
            .domain([0, width]);

        var y_scale = d3.scaleLinear()
            .range([height, 0])
            .domain([height, 0]);

        //axis, definição do conteudo dos eixos
        var x_axis = d3.axisBottom(x_scale);

        d3.select("svg")
            .append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (height - margin) + ")")
            .call(x_axis);

        var y_axis = d3.axisLeft(y_scale);

        d3.select("svg")
            .append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + margin + ", 0)")
            .call(y_axis);


        
        var years = [];
        var suicides = [];

        var taxaAno = new Object();
        var taxaAno = {};

        d3.csv("master.csv", function(error,data){
            if(error) console.log("Erro no ficheiro csv");
            
            data.forEach(function(d){
                years = +d.year;
                suicides = +d.suicides_no;

                if (taxaAno[years]==null){
                    taxaAno[years] = suicides;
                }
                else{
                    taxaAno[years] += suicides;
                }               
            });
            
            console.log(taxaAno);
            
            var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function (d) {
                    return x_scale(taxaAno[years]);
                })
                .attr("cy", function (d) {
                    return y_scale(taxaAno[suicides]);
                })
                .attr("r", function (d) {
                    return 10;
            });

            var line = d3.line()
                .x(function (){ return x_scale(taxaAno[years])})
                .y(function (){ return y_scale(taxaAno[suicides])
            });

            d3.select("svg")
                .append("path")
                .attr("d", line(data))
                .attr("class", "line_death");
            
            d3.select("svg")
                .append("text")
                .text("Anos")
                .attr("x", (width / 2) - margin)
                .attr("y", height - margin / 3);

            d3.select("svg")
                .append("text")
                .text("N. de suicidios")
                .attr("x", 0)
                .attr("y", 0)
                .attr("transform", "rotate (90, 0, 0) translate(100, -10)");
        });

        
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: #4CAF50;
  color: white;
}

IMG.displayed {
            display: block;
            margin-left: auto;
            margin-right: auto 
}

h1 {
            color: #069;
    }
<!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">Mapa</a>
  <a href="evolucaoAno.html">Evolucaoo por ano</a>
  <!-- <a href="about">About</a> -->
</div>

<body><br><br>
<!-- <IMG class="displayed" src="home.png" alt="some text" width=600 height=400> -->

<h1 style="text-align: center">Taxa de suicidio por ano</h1>
<script src="http://d3js.org/d3.v4.js"></script>

    <script>


    </script>

</body>
</html>

С помощью этого кода я хочу увидеть график жанрового рассеяния с линией, соединяющей точки.

Ошибка вКонсоль такая:

enter image description here

1 Ответ

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

ваши данные определены только внутри этого блока: 

d3.csv("master.csv", function(error,data){
        if(error) console.log("Erro no ficheiro csv");

        data.forEach(function(d){
            years = +d.year;
            suicides = +d.suicides_no;

            if (taxaAno[years]==null){
                taxaAno[years] = suicides;
            }
            else{
                taxaAno[years] += suicides;
            }               
        });

        console.log(taxaAno);

    });

, поэтому вам нужно переместить все, что зависит от данных, в этот блок: 

d3.csv("master.csv", function(error,data){
        if(error) console.log("Erro no ficheiro csv");

        data.forEach(function(d){
            years = +d.year;
            suicides = +d.suicides_no;

            if (taxaAno[years]==null){
                taxaAno[years] = suicides;
            }
            else{
                taxaAno[years] += suicides;
            }               
        });

        console.log(taxaAno);



    var circles = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return x_scale(taxaAno[years]);
            })
            .attr("cy", function (d) {
                return y_scale(taxaAno[suicides]);
            })
            .attr("r", function (d) {
                return 10;
        });

        var line = d3.line()
            .x(function (){ return x_scale(taxaAno[years])})
            .y(function (){ return y_scale(taxaAno[suicides])
        });

        d3.select("svg")
            .append("path")
            .attr("d", line(data))
            .attr("class", "line_death");

        d3.select("svg")
            .append("text")
            .text("Anos")
            .attr("x", (width / 2) - margin)
            .attr("y", height - margin / 3);

        d3.select("svg")
            .append("text")
            .text("N. de suicidios")
            .attr("x", 0)
            .attr("y", 0)
            .attr("transform", "rotate (90, 0, 0) translate(100, -10)");
});
...