Y-Axis is Disappearing
Question
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> <html> <head> <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; } </style> </head> <body> <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> </select> <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() .domain(dataArrayProjects) .rangePoints([0, height-100]); var color = d3.scale.linear() .domain([0,4]) .range(["#000066", "#22abff"]) var axis = d3.svg.axis() .ticks("10") .scale(widthScale); var yAxis = d3.svg.axis() .scale(heightScale) .orient("left"); var canvas = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(100, 0)"); var bars = canvas.selectAll("rect") .data(dataArray) .enter() .append("rect") .attr("width", emptyVar) .attr("height", 50) .attr("fill", function(d) { return color(d) }) .attr("y", function(d, i) { return i * 55 }) canvas.append("g") .attr("transform", "translate(0, 430)") .attr("font-family", "Helvetica") .attr("font-size", "15px") .call(axis); var svg = canvas.append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(-9,10)"); svg.append("g") .attr("font-family", "Helvetica") .attr("font-size", "15px") .style("fill", "black") .attr("class", "y axis") .call(yAxis); bars.transition() .duration(1500) .delay(200) .attr("width", function(d) { return widthScale(d); }) </script> <h2>Resources</h2> </body> </html>
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!
1 answers
solution1
2 ACCPTED 2016-06-27 04:05:29
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
svg.append("g")
.attr("font-family", "Helvetica")
.attr("font-size", "15px")
.style("fill", "black")
.attr("class", "y axis")
.call(yAxis);
to
canvas.append("g")
.attr("font-family", "Helvetica")
.attr("font-size", "15px")
.style("fill", "black")
.attr("class", "y axis")
.call(yAxis);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.