В настоящее время я делаю линейный график, который показывает данные в течение 6 месяцев. Я сделал график отлично, но теперь моя проблема заключается в том, что ось внизу указывает месяцы и каждый график, который будет выровнен с указанным месяцем.Изменение xAxis, чтобы сказать Месяцы вместо цифр
Для справки Я поместил массив данных с месяцами по порядку и массив данных, который используется для линии. Каждый месяц соответствует соответствующим данным (например, 1-й данные в массиве = 1-й месяц в массиве).
<!DOCTYPE html>
<html>
<head>
<meta>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
h1 {
font-size: 35px;
color: darkblue;
font-family: Helvetica;
border-bottom-width: 3px;
border-bottom-style: dashed;
border-bottom-color: black;
}
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
body{
font-family: sans-serif;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}
</style>
</head>
<body>
<h1>Resources used per Month</h1>
<script type="text/javascript">
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
var dataArrayMonths = ['April', 'May', 'June', 'July', 'August', 'September']
var data = [1.5, 1.5, 1.5, 3.6, 3.6, 2.7,];
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([0, 4]).range([h, 0]);
var line = d3.svg.line()
.x(function(d,i) {
return x(i);
})
.y(function(d) {
return y(d);
})
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
svg.append("path").attr("d", line(data));
</script>
</body>
</html>
То, что я спрашиваю, как я могу получить XAxis сказать, что 6 месяцев мне требуется, и как я могу получить его в линию с соответствующими точками на линии.
Спасибо заранее!