1
我想根据月度销售数据创建季度折线图。需要根据月度数据绘制季度折线图，使用d3
我能够得到相同的，如果我可以使用顺序标度的x轴。
但是，我想创建相同的使用d3.time.scale，而不是顺序规模。
问题：
如何将数据按时间分组进行季度分组。
在时间x轴
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
工作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>
感谢。请情节过于基于月度销售数据的折线图。我无法想象使用时间尺度而不是顺序尺度来做同样的事情。 –
我想将数据汇总到季度，然后我想绘制。 –
您可能在季度轴上绘制了每月数据。 –