FateJudgement FateJudgement - 4 months ago 13
Javascript Question

Y-Axis is Disappearing

When I orient my Y-Axis to the right I can see the text on the bars, but when I orient it to the left it disappears from the page. This is the code currently when the text is oriented to the left. A Y-Axis should appear with labels for each bars name.

<!DOCTYPE html>
<meta><meta http-equiv="refresh" content="3">
<meta name="description" content="Drawing Shapes w/ D3 - " />
<meta charset="utf-8">
<title>Resources per Project</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style type="text/css">
h1 {
font-size: 35px;
color: darkgrey;
font-family: Helvetica;
border-bottom-width: 3px;
border-bottom-style: dashed;
border-bottom-color: black;
h2 {
font-size: 20px;
color: black;
font-family: Helvetica;
text-decoration: underline;
margin-left: 290px;
margin-top: 2px;
<h1>Resources used per Project</h1>

<p>Choose Month
<select id="label-option">
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<script type="text/javascript">
var width = 600
var height = 500
var emptyVar = 0
var dataArrayProjects = ['2G','An','At','Au','AW','Ch','CI','CN']
var dataArray = [0.35,1.66,3.04,1.54,3.45,2.56,2.29,1.37]
var dataArrayMay = [0.36,1.69,3.08,1.54,3.62,2.61,2.22,1.44]
var dataArrayJune = [0.34,1.7,3.08,1.63,3.66,2.68,2.24,1.51]

var widthScale = d3.scale.linear()
.domain([0, 4])
.range([0, width]);

var heightScale = d3.scale.ordinal()
.rangePoints([0, height-100]);

var color = d3.scale.linear()
.range(["#000066", "#22abff"])

var axis = d3.svg.axis()

var yAxis = d3.svg.axis()

var canvas = d3.select("body")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(100, 0)");

var bars = canvas.selectAll("rect")
.attr("width", emptyVar)
.attr("height", 50)
.attr("fill", function(d) { return color(d) })
.attr("y", function(d, i) { return i * 55 })

.attr("transform", "translate(0, 430)")
.attr("font-family", "Helvetica")
.attr("font-size", "15px")

var svg = canvas.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(-9,10)");
.attr("font-family", "Helvetica")
.attr("font-size", "15px")
.style("fill", "black")
.attr("class", "y axis")

.attr("width", function(d) { return widthScale(d); })


All I would like to know is how can I orient my axis to the left and still have the text pop up.

Thank you!


Maybe you have to append your yAxis to canvas(same as your XAxis), not inside svg, that should be show out. I try to change your code from

   .attr("font-family", "Helvetica")   
   .attr("font-size", "15px")
   .style("fill", "black")
   .attr("class", "y axis")


      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .style("fill", "black")
      .attr("class", "y axis")