需要使用d3基于月度数据绘制季度折线图

Question

我想根据月度销售数据创建季度折线图。

我能够得到相同的，如果我可以使用x轴的序数标度。

但是，我想使用d3.time.scale而不是序数比例创建相同的内容。

问题：

如何将数据按季度分组以用于时间尺度图表。

工作jsfiddle

var margin = {
                top: 10,
                right: 10,
                bottom: 50,
                left: 30
            },
            width = 500 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;

        var data = [{
                month: "201001",
                sales: 100
            },
            {
                month: "201002",
                sales: 80
            },
            {
                month: "201003",
                sales: 60
            },
            {
                month: "201004",
                sales: 55
            },
            {
                month: "201005",
                sales: 58
            },
            {
                month: "201006",
                sales: 72
            },
            {
                month: "201007",
                sales: 68
            },
            {
                month: "201008",
                sales: 32
            },
            {
                month: "201009",
                sales: 65
            },
            {
                month: "201010",
                sales: 72
            },
            {
                month: "201011",
                sales: 34
            },
            {
                month: "201012",
                sales: 63
            },
            {
                month: "201101",
                sales: 19
            },
            {
                month: "201102",
                sales: 27
            },
            {
                month: "201103",
                sales: 34
            },
            {
                month: "201104",
                sales: 47
            },
            {
                month: "201105",
                sales: 54
            },
            {
                month: "201106",
                sales: 59
            },
            {
                month: "201107",
                sales: 67
            },
            {
                month: "201108",
                sales: 72
            },
            {
                month: "201109",
                sales: 32
            },
            {
                month: "201110",
                sales: 49
            },
            {
                month: "201111",
                sales: 52
            },
            {
                month: "201112",
                sales: 62
            },
        ];

        // convert month to date format and return the same array
        data = data.map(function (d) {
            return {
                date: new Date(parseInt(d.month.substring(0, 4)), parseInt(
                    d.month.substring(4, 6)), 0),
                sales: d.sales
            }
        });

        console.log(data);

        // time scale for x-axis
        var x = d3.time.scale()
            .domain(d3.extent(data, function (d) {
                return d.date;
            }))
            .range([0, width]);

        // linear scale for y-axis
        var y = d3.scale.linear()
            .domain(d3.extent(data, function (d) {
                return d.sales;
            }))
            .range([height, 0]);

        // append svg for chart div
        var svg = d3.select("#chart").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 + ")");


        // qtr format
        var qtr = function (date, i) {
            var month = date.getMonth();
            if (month <= 2) {
                return date.getFullYear() + " " + "Q1";
            } else if (month > 2 && month <= 5) {
                return date.getFullYear() + " " + "Q2";
            } else if (month > 5 && month <= 8) {
                return date.getFullYear() + " " + "Q3";
            } else {
                return date.getFullYear() + " " + "Q4";
            }
        }

        // xAxis  format to quarter
        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(d3.time.months, 3)
            .tickSize(5, 0)
            .tickFormat(qtr);

        // y-axis
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

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

        // add y-axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

.axis text {
            font: 10px sans-serif;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

Answer 1

只需在x轴

中包含nice()

    var x = d3.time.scale()
        .domain(d3.extent(data, function (d) {
            return d.date;
        }))
        .range([0, width]).nice();//add nice for first and last tick

工作代码here

或在刻度值列表中添加第一个刻度值。

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(d3.time.months, 3)
        .tickSize(10, 0)
        .tickValues( x.ticks().concat( x.domain()[0] ) )//add the first tick
        .tickFormat(qtr)
        ;

工作代码here