0
私のY軸を右に向けると、バーのテキストが見えますが、左に向けるとページから消えます。これは現在、テキストが左に向いているときのコードです。 Y軸には、各バー名のラベルが表示されます。Y軸が消えています
<!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>私が知りたいのすべては、私が左に私の軸を向けると、まだテキストポップアップを持つことができる方法です。
ありがとうございました！