Question

我确定这是一个新手问题，但我在将区域图表正确缩放到数据方面遇到了问题。更确切地说，我的区域图表的上线从未达到最大值，到目前为止我还没弄清楚原因。例如，y值（FREQ）的最大值为8，但该行的上限线条不适合该值（介于7和8之间）。

也许是因为我的填充变量？也许它以错误的方式移动我的轴？

有谁能告诉我我的错误是什么？我真的很感激： - ）

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
    <head>
        <title>Data Growth</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <style type="text/css">


        body {
            font: 12px sans-serif;
            background: #DFE3DB;
        }

        .line {
            fill: #7c9393;
            stroke: #7c9393;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #34363c;
            stroke-width: 3px;
            shape-rendering: crispEdges;
        }

        .title {
            font-size: 18px;
        }

        </style>
    </head>

    <body>


            <div id="dataDevelopment"></div>

        <script type="text/javascript">


        //Data

        var data = [{"YEAR":"2000","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2001","CL_ID":1,"FREQ":1,"SUMS":1},{"YEAR":"2002","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2003","CL_ID":1,"FREQ":2,"SUMS":3},{"YEAR":"2004","CL_ID":1,"FREQ":1,"SUMS":4},{"YEAR":"2005","CL_ID":1,"FREQ":3,"SUMS":7},{"YEAR":"2006","CL_ID":1,"FREQ":3,"SUMS":10},{"YEAR":"2007","CL_ID":1,"FREQ":1,"SUMS":11},{"YEAR":"2008","CL_ID":1,"FREQ":3,"SUMS":14},{"YEAR":"2009","CL_ID":1,"FREQ":3,"SUMS":17},{"YEAR":"2010","CL_ID":1,"FREQ":2,"SUMS":19},{"YEAR":"2011","CL_ID":1,"FREQ":7,"SUMS":26},{"YEAR":"2012","CL_ID":1,"FREQ":8,"SUMS":34},{"YEAR":"2013","CL_ID":1,"FREQ":3,"SUMS":37},{"YEAR":"2014","CL_ID":1,"FREQ":7,"SUMS":44},{"YEAR":"2015","CL_ID":1,"FREQ":1,"SUMS":45}];


        //The graph shown instantly

        var width = 800,
            height = 500,
            padding = 50;

        var svg = d3.select("#dataDevelopment")
            .append("svg")         
            .attr("width", width)
            .attr("height", height);

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

        var xMin = d3.min(data, function(d) {return d.YEAR;});
        var xMax = d3.max(data, function(d) {return d.YEAR;});

        var yMin = d3.min(data, function(d) {return d.FREQ;});
        var yMax = d3.max(data, function(d) {return d.FREQ;});

        var x = d3.time.scale().domain([timeFormat.parse(xMin) , timeFormat.parse(xMax)])
                                .range([padding, width - padding]);

        var y = d3.scale.linear().domain([yMin, yMax])
                                .range([height - padding, padding]);

        //Axes
        var xAxis = d3.svg.axis()
                       .scale(x)
                       .orient("bottom")
                       .tickValues([timeFormat.parse(xMin) , timeFormat.parse(xMax)]);

        var yAxis = d3.svg.axis()
                       .scale(y)
                       .orient("left")
                       .ticks(5);


        var lineGraph = d3.svg.area()
                            .interpolate("basis")
                            .x(function(d) { return x(timeFormat.parse(d.YEAR)); })
                            .y0(height - padding)
                            .y1(function(d) { return y(d.FREQ); });

        svg.append("path")
            .attr("class", "line")
            .attr("d", lineGraph(data));

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0, " + (height - padding) + ")")
            .call(xAxis); 

        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding + ", 0)")
            .call(yAxis);   





        </script>

    </body>
</html>

D3.JS域和y轴范围的问题

0 个答案: