0
Wenn ich meine Y-Achse nach rechts orientiere, kann ich den Text auf den Balken sehen, aber wenn ich ihn nach links orientiere, verschwindet er von der Seite. Dies ist der aktuelle Code, wenn der Text nach links ausgerichtet ist. Eine Y-Achse sollte mit Beschriftungen für jeden Balkennamen angezeigt werden.Y-Achse verschwindet
<!DOCTYPE html>
<html>
<head>
\t <meta><meta http-equiv="refresh" content="3">
<meta name="description" content="Drawing Shapes w/ D3 - " />
<meta charset="utf-8">
\t <title>Resources per Project</title>
\t <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
\t <style type="text/css">
\t h1 {
\t \t font-size: 35px;
\t \t color: darkgrey;
\t \t font-family: Helvetica;
\t \t border-bottom-width: 3px;
\t \t border-bottom-style: dashed;
\t \t border-bottom-color: black;
\t }
\t h2 {
\t \t font-size: 20px;
\t \t color: black;
\t \t font-family: Helvetica;
\t \t text-decoration: underline;
\t \t margin-left: 290px;
\t \t margin-top: 2px;
\t }
\t </style>
</head>
<body>
<h1>Resources used per Project</h1>
<p>Choose Month
\t <select id="label-option">
\t \t <option value="April">April</option>
\t \t <option value="May">May</option>
\t \t <option value="June">June</option>
\t \t <option value="July">July</option>
\t \t <option value="August">August</option>
\t \t <option value="September">September</option>
\t </select>
<script type="text/javascript">
\t var width = 600
\t var height = 500
\t var emptyVar = 0
\t var dataArrayProjects = ['2G','An','At','Au','AW','Ch','CI','CN']
\t var dataArray = [0.35,1.66,3.04,1.54,3.45,2.56,2.29,1.37]
\t var dataArrayMay = [0.36,1.69,3.08,1.54,3.62,2.61,2.22,1.44]
\t var dataArrayJune = [0.34,1.7,3.08,1.63,3.66,2.68,2.24,1.51]
\t var widthScale = d3.scale.linear()
\t \t \t \t \t .domain([0, 4])
\t \t \t \t \t .range([0, width]);
\t var heightScale = d3.scale.ordinal()
\t .domain(dataArrayProjects)
\t .rangePoints([0, height-100]);
\t var color = d3.scale.linear()
\t \t \t \t .domain([0,4])
\t \t \t \t .range(["#000066", "#22abff"])
\t var axis = d3.svg.axis()
\t \t \t \t .ticks("10")
\t \t \t \t .scale(widthScale);
\t var yAxis = d3.svg.axis()
\t .scale(heightScale)
\t .orient("left");
\t var canvas = d3.select("body")
\t \t \t \t .append("svg")
\t \t \t \t .attr("width", width)
\t \t \t \t .attr("height", height)
\t \t \t \t .append("g")
\t \t \t \t .attr("transform", "translate(100, 0)");
\t var bars = canvas.selectAll("rect")
\t \t \t \t .data(dataArray)
\t \t \t \t .enter()
\t \t \t \t \t .append("rect")
\t \t \t \t \t \t .attr("width", emptyVar)
\t \t \t \t \t \t .attr("height", 50)
\t \t \t \t \t \t .attr("fill", function(d) { return color(d) })
\t \t \t \t \t \t .attr("y", function(d, i) { return i * 55 })
\t canvas.append("g")
\t \t .attr("transform", "translate(0, 430)")
\t \t .attr("font-family", "Helvetica")
\t \t .attr("font-size", "15px")
\t \t .call(axis);
\t var svg = canvas.append("svg")
\t \t .attr("width", width)
\t \t .attr("height", height)
\t \t .append("g")
\t \t .attr("transform", "translate(-9,10)");
\t \t svg.append("g")
\t \t \t .attr("font-family", "Helvetica")
\t \t \t .attr("font-size", "15px")
\t \t \t .style("fill", "black")
\t \t .attr("class", "y axis")
\t \t .call(yAxis);
\t bars.transition()
\t \t \t .duration(1500)
\t \t \t .delay(200)
\t \t \t .attr("width", function(d) { return widthScale(d); })
</script>
<h2>Resources</h2>
</body>
</html>Alles, was ich wissen möchte, ist, wie kann ich meine Achse nach links orientieren und haben immer noch der Text eingeblendet.
Vielen Dank!