在d3.js中的浏览器中输出

时间:2019-01-29 16:23:34

标签: javascript d3.js

    var margin = {top: 30, right: 20, bottom: 60, left: 80},
    width = 1300 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x_scale =  d3.time.scale().range([0, width], 0.2, 0.2);
    //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")
    .ticks(32); //numero de anos em analise
    //console.log(x_axis)

var y_axis = d3.svg.axis().scale(y_scale)
    .orient("left")
    .ticks(20);

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

//var parser = d3.time.format("%Y");

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

        data.forEach(function(d){
            d.year = +d.year;
            d.suicides_no = +d.suicides_no;               
        });
        //console.log(data)

        var yearEvolution = d3.nest()
                .key(function(d){return d.year; })
                .rollup(function(leaves){
                    return d3.mean(
                        leaves, function(d) { 
                            return d.suicides_no;});
                })
                .entries(data);
        console.log(yearEvolution);

        //x_scale.domain(d3.extent(yearEvolution, function(d) { return d.key; }));
        x_scale.domain(d3.extent(yearEvolution, function(d) { return d.key; }));
        y_scale.domain([0, d3.max(yearEvolution, function(d) { return d.values+20; })]);

        console.log(x_scale)

        // var circles = svg.selectAll("circle")
        //     .data(yearEvolution)
        //     .enter()
        //     .append("circle")
        //     .attr("cx", function (d) {
        //         return x_scale(d.keys);
        //     })
        //     .attr("cy", function (d) {
        //         return y_scale(d.values);
        //     })
        //     .attr("r", function (d) {
        //         return 10;
        //     });

        var line = d3.svg.line()
            .x(function(d) { return x_scale(d.key); })
            .y(function(d) { return y_scale(d.values); });

        d3.select("svg")
            .append("path")
            .attr("d", line(yearEvolution))
            .attr("class", "linha");

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

        // Add the Y Axis
        svg.append("g")
            .attr("class", "y axis")
            .call(y_axis);

});

使用此代码,我想显示一条图形线。成为所需nest的{​​{1}},即每年(从1985年到2016年)自杀的次数。

我不认为我正在获得这些价值观,是我用错误的方式称呼它们吗?在代码的这一部分中,应该访问日期的值,并在行的行号上给出指示。

我根据在data的帮助下处理的数据留下了深刻的印象,但是该数据没有出现在图形中,知道为什么吗?

enter image description here

0 个答案:

没有答案