Ich mache derzeit ein Liniendiagramm, das Daten über 6 Monate zeigt. Ich habe das Diagramm in Ordnung gebracht, aber mein Problem besteht nun darin, dass die Achse auf der Unterseite die Monate angibt und jedes Diagramm mit dem besagten Monat übereinstimmt.Ändern der xAxis zu sagen Monate statt Zahlen
Als Referenz habe ich ein Daten-Array mit den Monaten in der Reihenfolge und ein Array der Daten, die für die Zeile verwendet wird platziert. Jeder Monat entspricht den jeweiligen Daten (z. B. die ersten Daten in der Anordnung = der erste Monat in der Anordnung).
<!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>Was ich bin ist die Frage, wie bekomme ich die xAchse die 6 Monate zu sagen, ich benötigen und wie bekomme ich es mit den entsprechenden Punkten auf der Linie aufreihen.
Vielen Dank im Voraus!