d3条形图中组内的轴文本旋转

时间：2017-03-10 08:28:23

标签： javascript jquery css d3.js

我正在使用d3.js开发条形图。我愿意以10度角旋转x轴文本。我将文字轮换应用为：

    g.selectAll("barbasetext2")
   .data(data)
   .enter()
   .append("text")
   .attr("class","barbasetext2")
   .text(function(d) {
        return d.NumberName; 
   })
   .attr("text-anchor", "middle")
   .attr("x", function(d) {
        return x(d.FullName) + (x.rangeBand()/2); 
   })
   .attr("y", function(d) {
        return (height - margin.bottom) + 35 ;
   })
   .attr("transform","rotate(10)") //Applying rotation here
   .attr("font-family", textfontfamily) 
   .attr("font-size", textfontsize)
   .attr("fill", textfontcolor);

根据我的知识，文本应该是旋转的，但这里完整的组是旋转的。这是完整的代码示例：

＆＃13;
＆＃13; 
html,body { width:100%; height:100%; margin:none; padding:none; }
#barchart { width:95%; height:95%; margin:none; padding:none; }

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="barchart" />
<script>

var 	elementid = "#barchart"; //div id here
var		textfontfamily = "sans-serif";
var		textfontsize = "11px";
var		textfontcolor = "black";
var		roundedcornerradius = 6;
var		baranimationduration = 500; //set it '0' to disable animation


var    	margin = {top: 10, right: 30, bottom: 40, left: 30};
var    	width = $(elementid).innerWidth()  - margin.left - margin.right;
var    	height = $(elementid).innerHeight() - margin.top - margin.bottom;
var		middlemarginw = 15;
var		middlemarginh = 15;

data = [
  {FullName: "A1", NumberName: "NA1", Seconds: 571200},
  {FullName: "A2", NumberName: "NA2", Seconds: 571200},
  {FullName: "A3", NumberName: "NA3", Seconds: 571200},
  {FullName: "A4", NumberName: "NA4", Seconds: 571200},
  {FullName: "A5", NumberName: "NA5", Seconds: 571200},
  {FullName: "A6", NumberName: "NA6", Seconds: 571200},
  {FullName: "A7", NumberName: "NA7", Seconds: 568896},
  {FullName: "A8", NumberName: "NA8", Seconds: 568896},
  {FullName: "A9", NumberName: "NA9", Seconds: 568896},
  {FullName: "A10",NumberName: "NA10", Seconds: 568896}
];


var x = d3.scale.ordinal()
	.rangeRoundBands([margin.left + middlemarginw, width - middlemarginw], .1, .42);

var y = d3.scale.linear()
    .range([height - margin.bottom , margin.top + margin.bottom]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y);
	yAxis.orient("left");
	
	
x.domain(data.map(function(d) { return d.FullName; }));
y.domain([d3.min(data, function(d) { return d.Seconds - 1000; }), d3.max(data, function(d) { return d.Seconds; })]);


var svg = d3.select(elementid).append("svg")
    .attr("width", "100%")
    .attr("height", "100%");

var g =	svg.append("g");
     g.attr("transform", "translate(" + margin.left + ")");	

	
	//Create Y-AXIS
	g.append("g") 
      .attr("class", "y axis")
	  .attr("transform", "translate(" + (margin.left + margin.right + margin.left + middlemarginw) + ")")
      .call(yAxis)
	  .selectAll('text')
	  .text(function(d) {
			return d;
		})
	  .attr("font-family", textfontfamily) 
	  .attr("font-size", textfontsize)
	  .attr("fill", textfontcolor);

	  function rectangle(x, y, width, height, radius){
		return "M" + (x + radius) + "," + y + "h" + (width - 2*radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2*radius) + "v" + radius + "h" + -radius + "h" + (2*radius - width) + "h" + -radius + "v" + -radius + "v" + (2*radius - height) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius + "z";
		};

	//Create Bars
	g.selectAll(".bar")
      .data(data)
	  .enter().append("path")
      .attr("class", "bar")
	  .attr("d", function(d){return rectangle(x(d.FullName),height - margin.bottom, x.rangeBand(),0,5);} )
      .style({fill: "red"})
	  .transition()
		.duration(baranimationduration)
		.ease("linear")
		.attr("d", function(d){return rectangle(x(d.FullName),y(d.Seconds), x.rangeBand(),height - y(d.Seconds) - margin.bottom,roundedcornerradius);} )
		.style("fill", "orange")
		.style("opacity", "1");
	  
	 //Create Bars base text  1
	g.selectAll("barbasetext1")
	   .data(data)
	   .enter()
	   .append("text")
	   .attr("class","barbasetext1")
	   .text(function(d) {
			return d.FullName; //whatever u wanna display here
	   })
	   .attr("text-anchor", "middle")
	   .attr("x", function(d) {
			return x(d.FullName) + (x.rangeBand()/2); //will be d.FullName here bcoz x-axis is binded with it.
	   })
	   .attr("y", function(d) {
			return (height - margin.bottom) +  20 ;
	   })
	   .attr("font-family", textfontfamily) 
	   .attr("font-size", textfontsize)
	   .attr("fill", textfontcolor);

	   
	//Create Bars base text  2
	g.selectAll("barbasetext2")
	   .data(data)
	   .enter()
	   .append("text")
	   .attr("class","barbasetext2")
	   .text(function(d) {
			return d.NumberName; 
	   })
	   .attr("text-anchor", "middle")
	   .attr("x", function(d) {
			return x(d.FullName) + (x.rangeBand()/2); 
	   })
	   .attr("y", function(d) {
			return (height - margin.bottom) + 35 ;
	   })
	   .attr("transform","rotate(10)")
	   .attr("font-family", textfontfamily) 
	   .attr("font-size", textfontsize)
	   .attr("fill", textfontcolor);
 
	   
	//Create X-AXIS line
	g.append("line")          
		.style("stroke", "black")  
		.attr("x1", margin.left + middlemarginw + margin.left + margin.right )
		.attr("y1", (height - margin.bottom)+5)     
		.attr("x2", width - margin.right - margin.left - middlemarginw)     
		.attr("y2", (height - margin.bottom)+5) ;  

</script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

这是因为rotate实际上围绕坐标系的原点（0,0）旋转（除非你设置了旋转中心）。

有几种方法可以解决这个问题。其中一个是将文本的x和y位置设置为相同的transform：

.attr("transform", function(d) {
    return "translate(" + (x(d.FullName) + (x.rangeBand() / 2)) + "," +
        ((height - margin.bottom) + 35) + ") rotate(10)"
})

这是您更新的代码：

html,body { width:100%; height:100%; margin:none; padding:none; }
#barchart { width:95%; height:95%; margin:none; padding:none; }

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="barchart" />
<script>

var 	elementid = "#barchart"; //div id here
var		textfontfamily = "sans-serif";
var		textfontsize = "11px";
var		textfontcolor = "black";
var		roundedcornerradius = 6;
var		baranimationduration = 500; //set it '0' to disable animation


var    	margin = {top: 10, right: 30, bottom: 40, left: 30};
var    	width = $(elementid).innerWidth()  - margin.left - margin.right;
var    	height = $(elementid).innerHeight() - margin.top - margin.bottom;
var		middlemarginw = 15;
var		middlemarginh = 15;

data = [
  {FullName: "A1", NumberName: "NA1", Seconds: 571200},
  {FullName: "A2", NumberName: "NA2", Seconds: 571200},
  {FullName: "A3", NumberName: "NA3", Seconds: 571200},
  {FullName: "A4", NumberName: "NA4", Seconds: 571200},
  {FullName: "A5", NumberName: "NA5", Seconds: 571200},
  {FullName: "A6", NumberName: "NA6", Seconds: 571200},
  {FullName: "A7", NumberName: "NA7", Seconds: 568896},
  {FullName: "A8", NumberName: "NA8", Seconds: 568896},
  {FullName: "A9", NumberName: "NA9", Seconds: 568896},
  {FullName: "A10",NumberName: "NA10", Seconds: 568896}
];


var x = d3.scale.ordinal()
	.rangeRoundBands([margin.left + middlemarginw, width - middlemarginw], .1, .42);

var y = d3.scale.linear()
    .range([height - margin.bottom , margin.top + margin.bottom]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y);
	yAxis.orient("left");
	
	
x.domain(data.map(function(d) { return d.FullName; }));
y.domain([d3.min(data, function(d) { return d.Seconds - 1000; }), d3.max(data, function(d) { return d.Seconds; })]);


var svg = d3.select(elementid).append("svg")
    .attr("width", "100%")
    .attr("height", "100%");

var g =	svg.append("g");
     g.attr("transform", "translate(" + margin.left + ")");	

	
	//Create Y-AXIS
	g.append("g") 
      .attr("class", "y axis")
	  .attr("transform", "translate(" + (margin.left + margin.right + margin.left + middlemarginw) + ")")
      .call(yAxis)
	  .selectAll('text')
	  .text(function(d) {
			return d;
		})
	  .attr("font-family", textfontfamily) 
	  .attr("font-size", textfontsize)
	  .attr("fill", textfontcolor);

	  function rectangle(x, y, width, height, radius){
		return "M" + (x + radius) + "," + y + "h" + (width - 2*radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2*radius) + "v" + radius + "h" + -radius + "h" + (2*radius - width) + "h" + -radius + "v" + -radius + "v" + (2*radius - height) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius + "z";
		};

	//Create Bars
	g.selectAll(".bar")
      .data(data)
	  .enter().append("path")
      .attr("class", "bar")
	  .attr("d", function(d){return rectangle(x(d.FullName),height - margin.bottom, x.rangeBand(),0,5);} )
      .style({fill: "red"})
	  .transition()
		.duration(baranimationduration)
		.ease("linear")
		.attr("d", function(d){return rectangle(x(d.FullName),y(d.Seconds), x.rangeBand(),height - y(d.Seconds) - margin.bottom,roundedcornerradius);} )
		.style("fill", "orange")
		.style("opacity", "1");
	  
	 //Create Bars base text  1
	g.selectAll("barbasetext1")
	   .data(data)
	   .enter()
	   .append("text")
	   .attr("class","barbasetext1")
	   .text(function(d) {
			return d.FullName; //whatever u wanna display here
	   })
	   .attr("text-anchor", "middle")
	   .attr("x", function(d) {
			return x(d.FullName) + (x.rangeBand()/2); //will be d.FullName here bcoz x-axis is binded with it.
	   })
	   .attr("y", function(d) {
			return (height - margin.bottom) +  20 ;
	   })
	   .attr("font-family", textfontfamily) 
	   .attr("font-size", textfontsize)
	   .attr("fill", textfontcolor);

	   
	//Create Bars base text  2
	g.selectAll("barbasetext2")
	   .data(data)
	   .enter()
	   .append("text")
	   .attr("class","barbasetext2")
	   .text(function(d) {
			return d.NumberName; 
	   })
	   .attr("transform", function(d){
     return "translate(" + (x(d.FullName) + (x.rangeBand()/2) - 12) + "," + ((height - margin.bottom) + 35) + ") rotate(10)"})
	   .attr("font-family", textfontfamily) 
	   .attr("font-size", textfontsize)
	   .attr("fill", textfontcolor);
 
	   
	//Create X-AXIS line
	g.append("line")          
		.style("stroke", "black")  
		.attr("x1", margin.left + middlemarginw + margin.left + margin.right )
		.attr("y1", (height - margin.bottom)+5)     
		.attr("x2", width - margin.right - margin.left - middlemarginw)     
		.attr("y2", (height - margin.bottom)+5) ;  

</script>

相关问题
最新问题