Question

当我将Y轴定位到右侧时，我可以看到条形图上的文字，但是当我将它定向到左边时，它会从页面上消失。这是当前文本朝向左侧时的代码。应显示Y轴，每个柱名称都带有标签。

<!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>

我想知道的是如何将我的轴定向到左侧并且仍然弹出文本。

谢谢！

Answer 1

也许你必须将你的yAxis附加到画布（与你的XAxis相同），而不是svg里面，应该显示出来。我尝试从

更改您的代码

svg.append("g")
   .attr("font-family", "Helvetica")   
   .attr("font-size", "15px")
   .style("fill", "black")
   .attr("class", "y axis")
   .call(yAxis);

到

canvas.append("g")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .style("fill", "black")
      .attr("class", "y axis")
      .call(yAxis);

Y轴正在消失

1 个答案: